Горизонтальное центрирование текста через изображение через 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 .image? Я не могу использовать свойство left, так как длина текста неизвестна, а свойство text-align не работает для .text div: (

Спасибо.

Ответ 1

Попробуйте использовать следующий CSS:

.image {
    position:relative;
}

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

Ответ 2

Сначала вам нужно поместить элемент .image, чтобы "свернуть" его потомков уровня блока с шириной элемента, а затем использовать text-align в элементе .text:

.image {
    float: left;
}
.text {
    text-align: center;
}

JS Fiddle demo.

Или вы могли бы просто дать ему display: inline-block, который позволит ему содержать содержимое на уровне блока и оставаться в потоке документа:

.image {
    display: inline-block;
}
.text {
    text-align: center;
}

JS Fiddle demo.

Ответ 3

Не можете ли вы использовать изображение в качестве фонового изображения div 'image', используя background-image: url ('/yourUrl/'); а затем вместо того, чтобы ваш текст в своем собственном div просто поместил его в изображение div, а затем примените text-align: center;

Ответ 4

Попробуйте следующее:

.image {

    position:relative;
}

.text {
    width:100%;

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