Question

我想将文本放在img上（垂直和水平居中）。我尝试了很多东西。问题是img和文本可以改变。 img也必须彼此相邻浮动。

<div id="div0">
    <div class="div1">
        <div class="div2">
            <div class="div3">Start</div>
            <img src="http://fs2.directupload.net/images/150222/w4d322gc.png" style="display:block;" width="auto" height="150">
        </div>
    </div>
    <div class="div1">
        <div class="div2">
            <div class="div3">Testtext</div>
            <img src="http://fs2.directupload.net/images/150222/w4d322gc.png" style="display:block;" width="auto" height="150">
        </div>
    </div>
</div>


.div1 {
    display:inline-block;
    vertical-align:middle;
}

.div2 {
    float: left; 
    background:#2E2EFE;
}

.div3{
    display: inline-block;
    position:absolute;
}

我无法使用margin / width / height / ...设置（bcs文本和img可以更改）

你们有想法吗？

Answer 1

每当我需要在不知道宽度/高度的情况下居中时，我会使用display: table display: table-cell; vertical-align: middle;和text-align: center的组合。

当您的父母有display: table;且子女有display: table-cell; vertical-align: middle;时，孩子会在桌子的中间（垂直），然后，只需使用text-align: center;水平居中

在这种情况下，您需要调整标记中的一些内容以使其有效。

以下是演示（使用您的图片）：http://jsfiddle.net/499nhjb0/1/

在您的情况下，您可以尝试将.div3更改为.container-text-wrapper行为。

希望它有所帮助！

Img上的文字 - 不使用高度/宽度

1 个答案: