Есть Owl Карусель, в которой нужно центрировать h2, p и a. Пишу text-align: center; - не работает. Как только не пробовал, всё равно тест не выравнивается. Возможно что-то мешает. Буду благодарен за помощь!
HTML:
<div class="owl-carousel owl-theme">
<div class="item">
<h2>Надпись 1</h2>
<p>Описание первого слайда карусели</p>
<a href="#">Читать дальше</a>
<img src="{% static 'image\default_news_carousel.jpg' %}">
</div>
<div class="item">
<h2>Надпись 2</h2>
<p>Описание второго слайда карусели</p>
<a href="#">Читать дальше</a>
<img src="{% static 'image\default_news_carousel.jpg' %}">
</div>
<div class="item">
<h2>Надпись 3</h2>
<p>Описание третьего слайда карусели</p>
<a href="#">Читать дальше</a>
<img src="{% static 'image\default_news_carousel.jpg' %}">
</div>
</div>
CSS:
.owl-carousel {
position: relative;
}
.owl-nav {
position: absolute;
width: 100%;
top: 100px;
}
.owl-prev {
left: 0;
position: absolute;
height: 100px;
width: 50px;
}
.owl-next {
right: 0;
position: absolute;
height: 100px;
width: 50px;
}
.owl-dots {
position: absolute;
left: 48%;
top: 270px;
}
.item {
height: 300px;
}
.item h2, p, a {
position: absolute;
}
.item h2 {
top: 30%;
font-size: 48px;
color: #fafafa;
}
.item h2, p, a {position: absolute;}
?text-align: center
.