css - 我怎样才能将 "fa-message"和头像和文字对齐

Question

我试图将 fa-message 图标、头像和文本彼此对齐，但文本在头像下方移动

这是我的代码:

<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>

image

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>