html - 如何使图片旁边的文字居中？

Question

我有这个演示 https://jsfiddle.net/447cv32f/ .我想将这个圆圈和文字居中。有什么建议如何做到这一点？

<div class="public_profile">
    <div class="profile_image business">
        <img src="img/realestate_icon.png" />
    </div>
    <h4>BUSINESS ACCOUNT</h4>
    <h3>Sunny Real Estate Sarl.</h3>
    <hr class="business_line" />
    <h5>VERIFIED USER</h5>
    <h5 class="registered">Registered on January 27th 2016</h5>
</div>

Answer 1

用 div 包裹文本并将 flex 样式移动到 .public_profile 容器

.public_profile {
  float: left;
  width: 100%;
  display: flex;
  align-items: center;
}
.public_profile .profile_image {
  border-radius: 50%;
  float: left;
  width: 120px;
  height: 120px;
  margin-right: 15px;
  overflow: hidden;
}
.public_profile .profile_image.business {
  background-color: #fdb902;
}
.public_profile .profile_image img {
  width: 100%;
  height: 100%;
}
.public_profile h4 {
  font-family: 'OpenSans-ExtraBold';
  font-size: 12px;
  color: #a1d15f;
  margin: 0;
}
.public_profile h3 {
  font-family: 'OpenSans-Light';
  font-size: 24px;
  color: #1e1e1e;
  margin: 0;
}
.public_profile h5 {
  font-family: 'OpenSans-Regular';
  font-size: 12px;
  color: #4d5663;
  margin: 0;
}
.public_profile h5.registered {
  font-size: 11px;
  color: #4c4d4d;
}
hr.business_line {
  margin-top: 0;
  margin-bottom: 0;
  width: 30px;
  display: inline-block;
  border-top: 2px solid #a1d15f;
}

<div class="public_profile">
  <div class="profile_image business">
    <img src="img/realestate_icon.png" />
  </div>
  <div>

    <h4>BUSINESS ACCOUNT</h4>
    <h3>Sunny Real Estate Sarl.</h3>
    <hr class="business_line" />
    <h5>VERIFIED USER</h5>
    <h5 class="registered">Registered on January 27th 2016</h5>
  </div>
</div>