Как правильно с помощью CSS разместить кнопку снизу блока?

[Burano]

Здравствуйте. Делаю карусель категорий каталога. Каждой категории соответствует тематическая картинка + кнопка "Смотреть в каталоге". Горизонтально центрировать кнопку так, чтобы везде корректно всё отображалось у меня получилось, но кнопка "прилипла" к верху баннера, а нужно, чтобы она была внизу. Хотел спросить совета у профи, как по фэншую разместить кнопку снизу, чтобы во всех браузерах она там и была и не было *овноверстки.

Для наглядности, структура кода размещения кнопки такая.
<div class="sppb-carousel-pro-text">
<div class="butcar"><a href="/" target="_self" id="btn-1483048621225" class="sppb-btn sppb-btn-default sppb-btn-square sppb-btn-3d">Смотреть в каталоге</a></div>
</div>

 

[Burano]

Или проще всего сделать отступ кнопки от верхнего края, вроде:

1. position: relative;
2. top: 200px;

 

[Burano]

а можно и от нижнего ну ежли по феншую bootom

От нижнего работает странно или же я где-то косячу(( Требуемый эффект достигается только так с bottom: -280px; Но это те же яйца, только с другой стороны.

 

[Burano]

Если размер блока фиксированный то в принципе пофигу от куда отступ!
Теперь про яйца!
Если смотреть в анфас то яйца два, если смотреть в профиль то одно Вы просто не побывали

Ох, Оксана

 

[NightHunter]

а не проще использовать after, before в нем уже прописать отступ?

 

[Burano]

а не проще использовать after, before в нем уже прописать отступ?

Мне ведь нужна кнопка, а на её фоне тематическое изображение категории. Разве в это случае уместно использовать after, before?

 

[zALEHANz]

<div class="sppb-carousel-pro-text">

прописать position:relative

<div class="butcar">

прописать position:absolute; bottom:0 (или нужный отступ)

 

[Burano]

прописать position:relative


прописать position:absolute; bottom:0 (или нужный отступ)

Что-то нет(( Уходит вообще моя кнопка. Видно что-то переопределяет.

 

[NightHunter]

Мне ведь нужна кнопка, а на её фоне тематическое изображение категории. Разве в это случае уместно использовать after, before?

Сорри, значит не понял. Изображению дай z-index:1, а кнопке 2, position:relative или absolute + padding: 10px 20px 10px 20px;(отступы уже сам смотри)

 

[zALEHANz]

Что-то нет(( Уходит вообще моя кнопка. Видно что-то переопределяет.

Ищите где переопределяет пропишите !important для проверки.
PS позиционирование top, bottom, left, right - работают только с абсолютно позиционированным элементом. Обратите внимание на высоту вашего <div class="sppb-carousel-pro-text"> при bottom:0 кнопка просто обязана прижаться к полу родительского контейнера