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

Question

[Илья Деревянных]

Подскажите как выровнять элементы, вот ссылка на страницу. После вставка текста под картинки элементы поехали.

<style>.showcase{ text-align: center; width: 247px; height: 410px; float: left; margin: 2px }</style>

<a href="https://wa.me/79022601747?text=Я%20хочу%20заказать%20дверь"><img class="alignnone size-medium wp-image-6837"
        src="https://onemoment.su/wp-content/uploads/2019/04/Написать-в-вотс-апп-300x49.png" alt="" height="300" /></a>
<div style="clear: both; width: 100%; margin: 0 5%; text-align: center">
    <div class="showcase"><img src="https://onemoment.su/wp-content/uploads/2019/04/ОМ-Сейф-дверь-Argus-1.jpg" alt="" />
        <div style="position:absolute; text-align: center">Дверь входная </br> сейф-дверь ARGUS ДА-15</br>19 500 руб.</div>
    </div>
    <div class="showcase"><img src="https://onemoment.su/wp-content/uploads/2019/04/ОМ-Сейф-дверь-Argus-10.jpg" alt=""
            width="200px" /></br></br>
            <div style="position:absolute; text-align: center"></div>Дверь входная </br> сейф-дверь ARGUS ДА-1 Капучино Муар</br>19 990 руб.</div>
</div>
<div class="showcase"><img src="https://onemoment.su/wp-content/uploads/2019/04/ОМ-Сейф-дверь-Argus-9.jpg" alt=""
        width="130px" />
    <div style="position:absolute; text-align: center">Дверь входная </br> сейф-дверь ARGUS ДА-2</br>19 500 руб.</div>
</div>
<div class="showcase"><img src="https://onemoment.su/wp-content/uploads/2019/04/ОМ-Сейф-дверь-Argus-8.jpg" alt=""
        width="130px" />
    <div style="position:absolute; text-align: center">Дверь входная </br> сейф-дверь ARGUS ДА-6</br>20 990 руб.</div>
</div>
<div class="showcase"><img src="https://onemoment.su/wp-content/uploads/2019/04/ОМ-Сейф-дверь-Argus-7.jpg" alt="" />
    <div style="position:absolute; text-align: center">Дверь входная </br> сейф-дверь ARGUS ДА-8</br>20 990 руб.</div>
</div>
<div class="showcase"><img src="https://onemoment.su/wp-content/uploads/2019/04/ОМ-Сейф-дверь-Argus-5.jpg" alt=""
        width="130px" />
    <div style="position:absolute; text-align: center">Дверь входная </br> сейф-дверь ARGUS ДА-11 </br>Венге Модерн</br>20 990 руб.</div>
</div>
<div class="showcase"><img src="https://onemoment.su/wp-content/uploads/2019/04/ОМ-Сейф-дверь-Argus-4.jpg" alt=""
        width="130px" />
    <div style="position:absolute; text-align: center">Дверь входная </br> сейф-дверь ARGUS ДА-11 </br>Изабель</br>20 990 руб.</div>
</div>
<div class="showcase"><img src="https://onemoment.su/wp-content/uploads/2019/04/ОМ-Сейф-дверь-Argus-3.jpg" alt=""
        width="130px" />
    <div style="position:absolute; text-align: center">Дверь входная </br> сейф-дверь ARGUS ДА-11 </br>Изабель</br>20 990 руб.</br>Кензо</div>
</div>
<div class="showcase"><img src="https://onemoment.su/wp-content/uploads/2019/04/ОМ-Сейф-дверь-Argus-2.jpg" alt=""
        width="130px" />
    <div style="position:absolute; text-align: center">Дверь входная </br> сейф-дверь ARGUS ДА-11 </br>Николь </br>20 990 руб.</div>
</div>
<div class="showcase"><img src="https://onemoment.su/wp-content/uploads/2019/04/ОМ-Сейф-дверь-Argus-6.jpg" alt=""
        width="130px" />
    <div style="position:absolute; text-align: center">Дверь входная </br> сейф-дверь ARGUS ДА-11 </br>Иден</br>16 990 руб.</div>
</div>
</br></br>
</div>

Answer 1

[Анатолий]

Размеры картинок сделай для начала одинаковыми (width и height у img). Или постоянный размер общего блока с картинкой и текстом и фиксированную высоту картинки.

Comments

[Илья Деревянных]

я б с радостью, только картинки разного размера

Answer 2

[Mars Cossado]

Задай блокам фиксированную высоту чтобы ровно было

Comments

[Илья Деревянных]

не подскажете как это сделать?

Answer 3

[Илья Деревянных]

Обрезал фотографии и исправил код, была опечатка: лишний