讓div和圖像在div內垂直對齊

Question

<div class="outside" style="width: 500px; height: 20px; border: 1px solid red;"> 
    <img src="" style="width: 10px; height: 20px; margin: 0; padding: 0; display: inline-block;"> 
    <div id="here" style="display: inline-block; height: 15px; border: 1px solid blue; font-size: 7px;">11</div> 
</div> 

我發現img底線和#here不在一行，如果我向#here添加任何文本，誰能告訴我爲什麼。 以及如何使在外面的#here和IMG verticall中心（IMG和#here在同一行）

Answer 1

vertical-align是你在找什麼。

.outside > * { 
 
    vertical-align: middle; 
 
}

<div class="outside" style="width: 500px; height: 20px; border: 1px solid red;"> 
 
    <img src="http://www.fillmurray.com/20/10" style="width: 10px; height: 20px; margin: 0; padding: 0; display: inline-block;"> 
 
    <div id="here" style="display: inline-block; height: 15px; border: 1px solid blue; font-size: 7px;">11</div> 
 
</div>

Answer 2

你想它的水平中心？

#ImageCtr { 
 
    width: 10px; 
 
    height: 20px; 
 
    
 
} 
 
#outer { 
 
    width: 500px; 
 
    height: 20px; 
 
    background-color: #FF0000; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<div id="outer"> 
 
    <div id="ImageCtr"><img src="http://i.imgur.com/vCVDBHB.png"> 
 
    </div> 
 
</div>