通过 CSS 在图像上水平居中文本

Question

考虑以下 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;
}

你能告诉我，是否有办法水平对齐 .image div 中心的文本？我不能使用 left 属性，因为文本的长度未知，并且 text-align 属性不适用于 .text div

谢谢你。

原文由 Zaur Nasibov 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

试试下面的 CSS：

 .image {
    position:relative;
}

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

原文由 Damir Kotoric 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

试试这个：

 .image {
    position:relative;
}

.text {
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    height:100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

原文由 Purnima Sh 发布，翻译遵循 CC BY-SA 4.0 许可协议