Bootstrap 4中<span>标签水平文本对齐失效问题求助

嘿，我正好碰到过类似的问题！你遇到的情况是因为<span>是行内元素，text-align属性对行内元素根本起不了作用——这个属性只对块级元素（比如默认的<div>）生效。而且就算你把<div>改成inline-block或者inline-flex，它的宽度只会包裹内容，不会占满父容器的整个宽度，自然没法实现左右对齐。

另外顺便提一句：你代码里的<div class="card-buttons" class="text-center">是错误的写法，HTML元素不能有多个class属性，要把所有类名放在同一个class属性里哦。

给你两个简单的解决方案，用Bootstrap 4自带的工具类就能搞定：

方案一：用Flex布局（推荐） #

直接给<h4 class="card-title">加上Bootstrap的flex工具类，利用弹性布局实现左右对齐，还能让元素垂直居中，代码最简洁：

<div class="card" > 
  <div class="card-block"> 
    <h4 class="card-title d-flex justify-content-between align-items-center"> 
      <span>🐯</span> 
      <span>Drago</span> 
    </h4> 
    <span class="card-text"> Location: ???<br> District: ???<br> Last updated: Tue, May 8th 2018 </span><br><br> 
    <div class="card-buttons text-center"> 
      <a href="#" class="btn btn-primary btn-sm"><i class="fas fa-user-cog"></i> Edit User</a> 
      <a href="#" class="btn btn-primary btn-sm"><i class="fas fa-home"></i> Manage Addresses</a> 
      <a href="#" class="btn btn-danger btn-sm"><i class="fas fa-trash-alt"></i> Delete</a> 
    </div> 
  </div> 
</div>

这里的d-flex把h4变成弹性容器，justify-content-between让子元素分别靠向容器两端，align-items-center保证表情和文字垂直居中，完美解决问题！

方案二：用绝对定位（备选） #

如果你不想用flex布局，也可以通过绝对定位实现：给父元素<h4>加上position: relative，然后给右侧的<span>加上position: absolute; right: 0;，同时确保父元素有足够的高度容纳内容：

<h4 class="card-title position-relative"> 
  <span>🐯</span> 
  <span class="position-absolute" style="right: 0;">Drago</span> 
</h4>

不过这个方案不如flex灵活，比如如果标题内容换行的话可能会出现重叠，所以还是优先推荐方案一。

内容的提问来源于stack exchange，提问作者Drago