Как центрировать текст с помощью CSS?

Question

У меня есть простой абзац, я хотел бы центрировать его так:

Вот HTML

    <div class="col-6 info-left">
      <h1>Warentykowe Prezenty</h1>
      <span class="small-text">Od serce kafetrii</span>
      <p>
        Posłuchaj Serca Kafeterii i w Walentynki podaruj bliskiej osobie
        więcej miłosci ! Przygotowalismy zestawienie prezentowych
        bestsellerów dla niej, dla niego dla Was i... dla Ciebie - miłość
        nie jedno ma imię, zastanawiałes się już kogo obdarujesz w tym roku
      </p>
    </div>

Вот CSS

.info-left, .info-right{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
/* .banner-info{
      padding: 31px 0px 215px;
} */
.info-left > h1{
    font-size: 48px;
    font-family: "Open Sans Condensed";
    color: rgb(241, 107, 108);
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
    text-indent: 2.65px;
}
.info-left p{
    font-size: 14px;
    font-family: "Open Sans";
    color: rgb(100, 100, 100);
    line-height: 1.5;
    text-align: left;
    width: 63%;
}
  .small-text{
    font-size: 21px;
    font-family: "Open Sans Condensed";
    color: rgb(241, 107, 108);
    font-weight: bold;
    line-height: 1.8;
    text-align: left;
    text-indent: 2.65px;
}

к сожалению, я получаю это

Я попробовал другую комбинацию, но не смог сделать так, как хочу

что мне нужно изменить, чтобы получить то, что я хочу?

Answer 1

Вы устанавливаете его на text-align: left в своем CSS. Измените на text-align: center в блоке .info-left p.

Answer 2

Проблема в том, что вы конкретно указываете text-align:left для элемента p в классе .info-left:

.info-left p{font-size:14px; ... text-align:left; ... width:63%;}

.info-left, .info-right{display:flex;justify-content:center;align-items:center;flex-direction:column;}

/* .banner-info{padding:31px 0px 215px;} */

.info-left > h1{font-size:48px;font-family:"Open Sans Condensed";color:rgb(241, 107, 108);font-weight:bold;line-height:1.2;text-align:center;text-indent:2.65px;}

.info-left p{font-size:14px;font-family:"Open Sans";color:rgb(100, 100, 100);line-height:1.5;width:63%;}

.small-text{font-size:21px;font-family:"Open Sans Condensed";color:rgb(241, 107, 108);font-weight:bold;line-height:1.8;text-align:left;text-indent:2.65px;}

<div class="col-6 info-left">
    <h1>Warentykowe Prezenty</h1>
    <span class="small-text">Od serce kafetrii</span>
    <p>
        Posłuchaj Serca Kafeterii i w Walentynki podaruj bliskiej osobie
        więcej miłosci ! Przygotowalismy zestawienie prezentowych
        bestsellerów dla niej, dla niego dla Was i... dla Ciebie - miłość
        nie jedno ma imię, zastanawiałes się już kogo obdarujesz w tym roku
    </p>
</div>

Поскольку вы уже указали:

display:flex;justify-content:center;align-items:center;

Для всего DIV с классом info-left вам не нужно ничего указывать для элементов p в классе .info-left. Но это не проблема.

Answer 3

Установите text-align в элементе p для выравнивания (чтобы взять всю строку), а также text-align-last: center; для центрирования последней строки.

.info-left,
.info-right {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}


/* .banner-info{
      padding: 31px 0px 215px;
} */

.info-left>h1 {
  font-size: 48px;
  font-family: "Open Sans Condensed";
  color: rgb(241, 107, 108);
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  text-indent: 2.65px;
}

.info-left p {
  font-size: 14px;
  font-family: "Open Sans";
  color: rgb(100, 100, 100);
  line-height: 1.5;
  width: 63%;
  text-align: justify;
  text-align-last: center;
}

.small-text {
  font-size: 21px;
  font-family: "Open Sans Condensed";
  color: rgb(241, 107, 108);
  font-weight: bold;
  line-height: 1.8;
  text-align: left;
  text-indent: 2.65px;
}

<div class="col-6 info-left">
  <h1>Warentykowe Prezenty</h1>
  <span class="small-text">Od serce kafetrii</span>
  <p>
    Posłuchaj Serca Kafeterii i w Walentynki podaruj bliskiej osobie więcej miłosci ! Przygotowalismy zestawienie prezentowych bestsellerów dla niej, dla niego dla Was i... dla Ciebie - miłość nie jedno ma imię, zastanawiałes się już kogo obdarujesz w tym
    roku
  </p>
</div>