Question

我有3个div，一个图像div，一个文本div和另一个图像div

<div id="1" style="display:inline-block; width:100px">
    <span style="margin:0;">Center<span>
</div>

我想将span文本居中于其父div

我在文本上尝试了纵向对齐但没有成功，我也看到有一个小的边距，在文本下面填充，它来自哪里？

任何指向解决方案都会有所帮助

干杯

Answer 1

您需要更改vertical-align元素的img属性 - 而不是文本。值得注意的是，此属性的默认值为baseline，因此图像元素与文本的基线对齐。 top / bottom / middle等值会改变此行为。

Updated Example

img { vertical-align: middle; }

值得注意的是id被认为是唯一的。

Answer 2

<div id="userbox" style="float:right; background-color:grey;display:table;">

    <div id="1" style="display:inline-block">
        <img src="http://www.dev2one.com/excel2web/demo/images/user_pic2.png" />

    </div>

    <div id="1" style="display:inline-block; width:100px;display:table-cell;vertical-align:middle;">
        <span style="margin:0;">Center<span>
    </div>

    <div id="1" style="display:inline-block">
        <img src="http://www.dev2one.com/excel2web/demo/images/cross.png" />

    </div>

</div>

垂直居中文本并删除文本下的边距

2 个答案: