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

将analysis_options.yaml元素中的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;
}

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;

对于整个类为info-left的DIV，您无需为类p下的.info-left元素指定任何内容。但这没问题。

Answer 3

您正在CSS中将其设置为text-align: left。在text-align: center块中更改为.info-left p。