设置与文本垂直对齐的图像

Question

  

编辑：请忽略电话/电子邮件行。

我想达到这样的结果：

由于我需要副文本与图标的高度相同，因此我遇到了相对和绝对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

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

请参阅代码段：

  

注意：我没有使用 SCSS 进行演示

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