使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>