html - 将文本垂直居中对齐，位于图像中间 - 具有自动行高

Question

这是 fiddle :

<div style="background-color: yellow;">
    <div style="background-color: red; float: left;">1</div>
    <div style="background-color: green; float: left;"><img src="http://static.idokep.hu/images/nagyelore/ujikon2/030.png" width="108" height="50" /></div>
</div>

http://jsfiddle.net/LgyjZ/

我知道可以通过将“行高:50”添加到第一个 div 来实现目标(不是在 fiddle 中完成)。但是假设我可以多次改变高度并且我不想设置行高。它能以某种方式达到 100% 吗？

Answer 1

您需要添加vertical-align: middle。稍微改变了结构:

.text {
    background-color: red;
    display: inline;
    vertical-align: middle;
}

img {
    vertical-align: middle;
}

<div style="background-color: yellow;">
    <div class="text">1</div>
    <img src="http://static.idokep.hu/images/nagyelore/ujikon2/030.png" width="108" height="50" />
</div>

Example