Html/Css Как выровнять элементы?

Question

[Ansh-spb]

Как в плагине wordpress popular posts выровнять элементы, чтобы кнопка "читать" была под заголовком записи?
Имеется html разметка для отображения популярных постов

<ul class="wpp-grid">
<li>
{thumb_img} /*выводит миниатюру изображения поста*/
{title} /*выводит название поста формата <a href="{url}">{title}</a>*/
<a class="read-btn" href="{url}">читать</a> /кнопка "читать"*/
</li>
</ul>

Нужно сделать вот так
Пока не было кнопки Читать все было отлично, в CSS Прописал абсолютную позицию title и он появлялся по центу изображения.

.wpp-grid li {
position : relative;
display : inline;
float : left;
margin : 0;
}
.wpp-grid li .wpp-post-title {
display : block;
position : absolute;
left : 10%;
top : 50%;
transform : translateY(50%);
}

А вот как позиционировать кнопку Читать?? Если ей задаю позицию Absolut она накладывается сверху на Title.
Если позиция relative то кнопка отображается под изображением поста. можно было бы задать позицию Absolut и top скажем 70%, но не известно количество строк в названии поста. Если это 1 строка то все выглядит хорошо, а если название поста длинное на 4 строки то кнопка наложится на title. Может что то в html изменить? пробовал добавить title и кнопку в один див и позиционировать его, но тоже не получилось(

Answer 1

[Егор Живагин]

li {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

И убрать абсолюты и смещения

Или картинка тоже блок? Тогда сделать новый блок, внутри которого будет заголовок и кнопка. (с затемнённым фоном на вашем скрине) и ему уже прописать то, что я написал

Или другой вариант - заголовку не абсолют, а relative . И кнопке тоже. Далее центрируете по горизонтали, а всё остальное делается отступами

Comments

[Ansh-spb]

картинка тоже блок

.wpp-grid li .wpp-thumbnail {
display : block;
width : 100%;
height : auto;
border : none;
}

Но сейчас попробую вашим способом