Mengapakah `justify-content: center` Tidak Memusatkan Teks dalam Bekas Flex?

Teks Tidak Berpusat dengan justify-content: center

Dalam bekas lentur, sifat justify-content memusatkan item melenturkan secara mendatar, tetapi ia tidak mempunyai kawalan langsung ke atas teks dalam item tersebut. Apabila teks dibalut dalam item, ia mengekalkan nilai penjajaran teks lalainya: nilai mula, menghasilkan teks tidak berpusat.

Bekas fleksibel, item fleksibel dan teks mewakili tiga tahap berbeza dalam struktur HTML. justify-content mempengaruhi item flex, bukan teks yang terkandung di dalamnya.

Jika item flex memenuhi lebar bekasnya, ia tidak boleh ditengahkan, maka teks tidak sejajar apabila dibalut.

Kepada tengah teks terus, tetapkan penjajaran teks: tengah pada item atau bekas flex melalui warisan.

Contoh

<code class="css">.box {
  width: 100px;
  height: 100px;
  background-color: lightgreen;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.with-align p {
  text-align: center;
}</code>

<code class="html"><div class="box">
  <p>some long text here</p>
</div>

<div class="box with-align">
  <p>some long text here</p>
</div></code>

Atas ialah kandungan terperinci Mengapakah `justify-content: center` Tidak Memusatkan Teks dalam Bekas Flex?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!