通过CSS水平居中的文字在图片 [英] Horizontal centering text over image via CSS

问题描述

考虑下面的HTML：

<div class="image">
    <img src="sample.png"/>
    <div class="text">
       Text of variable length
    </div>
</div>

其中：

.image {
    position:relative;
    text-align:center; // doesn't work as desired :(
}

.text {
    position:absolute;
    top:30px;
}

能否请你告诉，如果有一种方法来水平对齐在在图像配 div的文本中心？我无法使用离开属性，因为文本的长度未知和的text-align 属性没有按'T为的.text DIV工作：（

Can you please tell, if there is a way to horizontally align the text in the center of the .image div? I can't use the left property, since the length of the text is unknown and the text-align property doesn't work for the .text div :(

感谢您。

推荐答案

请尝试以下的CSS：

.image {
    position:relative;
}

.text {
    left: 0;
    position:absolute;
    text-align:center;
    top: 30px;
    width: 100%
}

这篇关于通过CSS水平居中的文字在图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！