Не работает text-align

Есть карусель, содержимое которой (теги p, h2 и a) нужно центрировать, при чём что бы это было адаптивно. Но text-align: center; не пашет. Пробовал оборачивать теги в дивы, всё равно не работает. Что делаю не так? HTML:

<div class="rigsCarousel">
    <div class="rigsCarouselItem">
      <h2>Надпись 1</h2>
      <p>Описание первого слайда карусели</p>
      <a href="#">Читать дальше</a>
      <img src="{% static 'image\default_news_carousel.jpg' %}">
    </div>
    <div class="rigsCarouselItem">
      <h2>Надпись 2</h2>
      <p>Описание второго слайда карусели</p>
      <a href="#">Читать дальше</a>
      <img src="{% static 'image\default_news_carousel.jpg' %}">
    </div>
    <div class="rigsCarouselItem">
      <h2>Надпись 3</h2>
      <p>Описание третьего слайда карусели</p>
      <a href="#">Читать дальше</a>
      <img src="{% static 'image\default_news_carousel.jpg' %}">
    </div>
  </div>
</div>

CSS:

.rigsCarousel {
  height: 300px;
  width: 100%;
  position: relative;
}

.rigsCarousel .slick-next {
  position: absolute;
  right: 30px;
  z-index: 10;
}

.rigsCarousel .slick-prev {
  position: absolute;
  left: 30px;
  z-index: 10;
}

.rigsCarousel .slick-dots {
  position: absolute;
  top: 270px;
}

.rigsCarousel img {
  height: 300px;
  width: 100%;
}

.rigsCarousel a {
  position: absolute;
}

.rigsCarousel h2 {
  position: absolute;
  color: white;
  font-size: 52px;
}

.rigsCarousel p {
  position: absolute;
  color: white;
  font-size: 26px;
}