Выравнивание 3 divs с изображением

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>

Codepen here

Answer 1

просто добавить vertical-align:top; к вашему автору мета- и автор-локации классам. Если вы хотите место в верхней части дивы вы можете добавить padding-top или margin-top

codepen here

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; 
}