У меня есть несколько абсолютно позиционированных div с двумя строками текста, h2 и p. Я пытаюсь сделать так, чтобы текст был: центрирован по вертикали в абсолютно позиционированном div, выровнен по правому краю, и между тегами h2 и p был разрыв строки.
Абсолютно позиционированные блоки div содержатся в родительском элементе, поэтому я подумал, что могу использовать flexbox для решения этой проблемы, но оказалось, что это сложнее, чем ожидалось. Я дал родительский display: flex и align-items: center, который их центрирует по вертикали. Но тогда мои h2 и p находятся на одной линии, разрыва строки нет.
Затем я использовал flex-direction: column, который создал разрыв строки, но тогда текст больше не центрировался по вертикали. Если я использую align-items: flex-end и flex-direction: column, текст будет выровнен по правому краю и будет разрыв строки между h2 и p, но тогда они не будут центрированы по вертикали.
margin-right: auto предположительно может выравнивать элементы по правому краю, но в сочетании с align-items: center и flex-direction: column это не работает. float: right тоже не работает.
Моя разметка выглядит так:
<div class = "col-sm-12">
<div class = "row overlay-container">
<img src = "_img/[email protected]" class = "img-responsive grid-image" alt = "top-right@4x image" />
<div class = "overlay overlay-2">
<h2>Recent Work</h2>
<p>Lorem ipsum dolor</p>
</div> <!-- /overlay -->
</div> <!-- /row -->
</div> <!-- /top right -->
где оверлей - это абсолютно позиционированный div внутри оверлей-контейнера. Наложение - это рамка, расположенная над частью изображения. Display: flex и другие упомянутые выше свойства относятся к классу наложения.
Кажется, что как бы я ни старался, из трех условий мне удается заставить работать только два. Использование flexbox не является обязательным, но я подумал, что это упростит вертикальное центрирование текста. Кто-нибудь может помочь?
