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

时间:2014-09-13 23:24:08

标签: css css-float

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

http://jsfiddle.net/m02pw4wk/4/

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

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

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

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

干杯

2 个答案:

答案 0 :(得分:1)

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

Updated Example

img { vertical-align: middle; }

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

答案 1 :(得分:0)

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