html - 如何使用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

在您的 p 元素中设置 text-align 以证明(整行)以及 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>