html - 将 3 个 div 与图像对齐

Question

我正在尝试将个人资料图片与两个单独的 div 对齐。我使用了 inline-block 和 text-align:center。我在控制图像 div 的位置时遇到问题 - 它正在将其他两个 div 向下推并且不对齐。

如何控制图片的位置？

/* POST META */

.post-meta {
  background: #888;
  padding: 0 0%;
  border-top: 0px solid #ddd;
  border-bottom: 0px solid #ccc;
  text-align:center;
  float:none;
  margin-bottom:16px;
  height:80px;
}


.post-meta a {
  float:none;
  padding:0px;
  font-weight:normal;
}


.author-meta {
  font-size: 15px;
  letter-spacing: .5px;
  font-weight: normal;
  margin:0px;
  display: inline-block;
  padding: 0px;
  float: none;
  color:#333;
  background:#ddd;
  height:50px;
}


.author_location {
    padding: 0px;
    text-transform: none;
    font-size: 12px;
    color: #444;
    font-weight: normal;
    letter-spacing: .5px;
    display: inline-block;
    float: none;
    background:#ddd;
    height:50px;
    margin:0px;

}


.entry_author_image {
  float: none;
  padding: 0;
  display: inline-block;
  color: #999;
  font-size: 0.7em;
  font-weight: normal;
  background: no-repeat left center;
  background-size: 18px auto;
  margin:0px;
  letter-spacing: 1px;
  background:#ddd;
  height:50px;
}

<div class="post-meta">
  <div class="entry_author_image">
<img src="https://www.dropbox.com/s/w1thsifonsi6dji/profile-image.png?raw=1" width="22" height="22"></div>
  <div class="author-meta"><a href="#">Author name</a></div>,
  <div class="author_location"><a href="#">City</a></div>
</div>

代码笔 here

Answer 1

只需将 vertical-align:top; 添加到您的 author-meta 和 author-location 类。如果你想在 div 的顶部有一个空间，你可以添加 padding-top 或 margin-top

codepen here