html - 设置图像与文本垂直对齐

Question

EDIT: Please disregard the phone/email row.

我想达到这样的结果:

因为我需要侧边文本与图标高度相同，所以我在相对和绝对 div 包装器以及如何正确设置它们方面遇到了一些问题。

HTML

<div class="row topWrapper">
    <div class="iconWrapper">
        <i class="fa fa-user-circle-o fa-2x"></i>
    </div>
    <div class="captionWrapper">
        <h5><strong>Liat </strong></h5>
        <h5>Your recruitment counsel</h5>
    </div>
</div>

SCSS

.topWrapper {
  background-color: #d9534f;
  height: 150px;
  .iconWrapper {
    background-color: #f7ecb5;
    display: inline-block;
    position: relative;
    width:16.67%;
    i{
      position: absolute;
      top: 50%;
      @include translate(0, -50%);
    }
  }
  .captionWrapper{
    background-color: #245580;
    display: inline-block;
  }
}

Answer 1

您不需要使用绝对位置来获得您想要的东西，只需一些东西就可以了。

查看代码片段:

Note: i didn't use SCSS for demonstration purpose

.topWrapper {
  background-color: #d9534f;
  height: 150px;
  padding: 5px;
}

.iconWrapper {
  display: inline-block;
  font-size: 17px;
}

.captionWrapper {
  display: inline-block;
}

.captionWrapper h5 {
  margin: 2px;
  /*reduce the margin to make the two texts aligned with the icon*/
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="row topWrapper">
  <div class="iconWrapper">
    <i class="fa fa-user-circle-o fa-2x"></i>
  </div>
  <div class="captionWrapper">
    <h5><strong>Liat </strong></h5>
    <h5>Your recruitment counsel</h5>
  </div>
</div>