将 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; 添加到您的作者元和作者位置类。如果你想在 div 的顶部有一个空间，你可以添加 padding-top 或 margin-top

codepenhere

Answer 2

否则你可以这样做： http://codepen.io/pierre29177/pen/JdmejP

 <div id="author">
<img src="http://www.americansuburbx.com/wp-content/uploads/2010/03/08_059-PFOLIO_ONORATO-and-KREBS-PAG-52-53-Custom-Custom.jpg" alt="img6"/>

 <div id="meta">
 <a class="name">michael collins </a>
 <a class="book">into the grat wide open</a>
</div>
</div>


#author{
    position: fixed;

    height: 80px;
    background: #F99;
}
#author img {
    width: 40px;
    height: 40px;
    opacity: 0.7;
    margin-left:20px;
}

#author #meta a {
font-size: 10px;
text-transform: uppercase;
cursor:pointer;
margin:20px;
}

#author img, #author #meta  {   

margin-top:20px;
vertical-align:middle;
display:inline-block;
}