[英]make div and image vertically align inside a div
<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>
I found bottom line of img and #here do not in a line, if I add any text to #here, who can tell me why. 我发现img的底行和#here不在一行,如果我向#here添加任何文本,谁能告诉我原因。 And how to make the #here and img verticall center in the outside (img and #here in the same line ) 以及如何使#here和img verticall在外部居中(img和#here在同一行中)
vertical-align
is what you are looking for. 您要寻找的是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>
Do you want it in the horizontal center? 您要在水平中心吗?
#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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.