我如何使"fa-message“与”头像“和”文字“沿彼此对齐？

Question

我试着把发信息图标、头像和文本对齐，但是文字在头像下面移动。

这是我的密码：

<div> 
    <a href="#"><span class="fa fa-envelope"><sup>
    <span class="badge badge-success">5</span></sup></a></span>
    <span> <img src="./girl.jpg" class="img-circle img2">
    <i class="picsname2">Welcome,<br>John Doe</i></span>
</div>

图像

Answer 1

​

i.picsname2 {
  display: inline-block;
  vertical-align: middle;
  line-height: 1.2;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div>
  <a href="#">
    <span class="fa fa-envelope"></span>
    <sup><span class="badge badge-success">5</span></sup>
  </a>
  <span> 
      <img src="http://placekitten.com/30/30" class="img-circle img2">
      <i class="picsname2">Welcome,<br>John Doe</i>
    </span>

</div>

​

Answer 2

您可以增加宽度或使用css属性display: inline-block或删除名称之前使用的<br/>。

Answer 3

使用柔性盒，这是一个简单的任务。然后调整元素之间的空间。

​

.flex-row-centered {
  display: flex;
  flex-direction: row;
  align-items: center;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="flex-row-centered"> 
    <a href="#"><span class="fa fa-envelope"><sup>
    <span class="badge badge-success">5</span></sup></a></span>
    <span class="flex-row-centered"> <img src="./girl.jpg" class="img-circle img2">
    <i class="picsname2">Welcome,<br>John Doe</i></span>
</div>

​

或者(因为您用引导-4标记了问题)，可以使用引导4类：

​

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-direction-row align-items-center"> 
    <a href="#" class="mr-2"><span class="fa fa-envelope"><sup>
    <span class="badge badge-success">5</span></sup></a></span>
    <span class="d-flex flex-direction-row align-items-center"> <img src="./girl.jpg" class="img-circle img2 mr-2">
    <i class="picsname2">Welcome,<br>John Doe</i></span>
</div>

​