Выравнивание текста по центру CSS

Question

Есть 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;
}

Answer 1

Как вариант добавить left: 50%; transform: translateX(-50%); для .item h2, p, a. Пример:

.item h2,
p,
a {
  left: 50%;
  transform: translateX(-50%);
}

.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;*/
}

<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>

Если через text-align: center;, то для .item h2, p, a добавить left: 0; right: 0; text-align: center;. Пример:

.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;
  left: 0;
  right: 0;
  text-align: center;
}

.item h2 {
  top: 30%;
  font-size: 48px;
  /*color: #fafafa;*/
}

<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>

БЛОГ НА HUSL

Выравнивание текста по центру CSS

Ответы (1 шт):