Bagaimana cara menyejajarkan teks secara vertikal di dalam flexbox?

Saya ingin menggunakan flexbox untuk meluruskan beberapa konten secara vertikal di dalam <li>tetapi tidak memiliki kesuksesan besar.

Saya telah memeriksa online dan banyak tutorial yang benar-benar menggunakan pembungkus div yang mendapatkan align-items:centerdari pengaturan fleksibel pada induknya, tapi saya bertanya-tanya apakah mungkin untuk memotong elemen tambahan ini?

Saya telah memilih untuk menggunakan flexbox dalam hal ini karena tinggi item daftar akan menjadi dinamis %.

* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
}

ul {
  height: 100%;
}

li {
  display: flex;
  justify-content: center;
  align-self: center;
  background: silver;
  width: 100%;
  height: 20%;
}

<ul>
  <li>This is the text</li>
</ul>

Alih-alih menggunakan align-self: centergunakan align-items: center.

Tidak perlu diubah flex-directionatau digunakan text-align.

Inilah kode Anda, dengan satu penyesuaian, agar semuanya berfungsi:

ul {
  height: 100%;
}

li {
  display: flex;
  justify-content: center;
  /* align-self: center;    <---- REMOVE */
  align-items: center;   /* <---- NEW    */
  background: silver;
  width: 100%;
  height: 20%; 
}

The align-selfproperti berlaku untuk item fleksibel . Kecuali Anda libukan item fleksibel karena induknya - the ul- tidak memiliki display: flexatau display: inline-flexmenerapkan.

Oleh karena itu, ulini bukan wadah fleksibel, libukan barang fleksibel, dan align-selftidak memiliki efek.

The align-itemsproperti ini mirip dengan align-self, kecuali itu berlaku untuk wadah fleksibel .

Karena liwadah fleksibel, align-itemsdapat digunakan untuk memusatkan elemen anak secara vertikal.

* {
  padding: 0;
  margin: 0;
}
html, body {
  height: 100%;
}
ul {
  height: 100%;
}
li {
  display: flex;
  justify-content: center;
  /* align-self: center; */
  align-items: center;
  background: silver;
  width: 100%;
  height: 20%;
}

<ul>
  <li>This is the text</li>
</ul>

demo codepen

Secara teknis, begini caranya align-itemsdan align-selfbekerja ...

The align-itemsproperti (pada wadah) menetapkan nilai default align-self(pada item). Karena itu, align-items: centerberarti semua item fleksibel akan diatur ke align-self: center.

Tetapi Anda dapat mengganti default ini dengan menyesuaikan align-selfpada item individual.

Misalnya, Anda mungkin menginginkan kolom ketinggian yang sama, sehingga wadah diatur ke align-items: stretch. Namun, satu item harus disematkan ke atas, sehingga diatur ke align-self: flex-start.

contoh

Bagaimana teks item fleksibel?

Beberapa orang mungkin bertanya-tanya bagaimana serangkaian teks ...

<li>This is the text</li>

adalah elemen anak dari li.

Alasannya adalah bahwa teks yang tidak secara eksplisit dibungkus oleh elemen tingkat inline secara algoritmik dibungkus oleh kotak inline. Ini menjadikannya elemen inline anonim dan anak dari induk.

Dari spec CSS:

9.2.2.1 Kotak inline anonim

Teks apa pun yang secara langsung terkandung di dalam elemen kontainer blok harus diperlakukan sebagai elemen inline anonim.

Spesifikasi flexbox menyediakan perilaku serupa.

4. Item Flex

Setiap anak dalam aliran dari wadah fleksibel menjadi item fleksibel, dan setiap rangkaian teks yang berdekatan yang langsung terkandung di dalam wadah fleksibel dibungkus dalam item fleksibel anonim.

Oleh karena itu, teks dalam liitem fleksibel.

Jawaban yang paling banyak dipilih adalah untuk menyelesaikan masalah khusus ini yang diposting oleh OP, di mana konten (teks) sedang dibungkus di dalam suatu inline-blockelemen. Beberapa kasus mungkin tentang memusatkan elemen normal secara vertikal di dalam wadah , yang juga diterapkan dalam kasus saya, jadi untuk itu yang Anda butuhkan adalah:

align-self: center;

Langkah terbaik adalah dengan hanya meletakkan kotak di dalam kotak . Yang harus Anda lakukan adalah memberi anak itu align-items: center. Ini akan menyelaraskan teks di dalam induknya secara vertikal.

// Assuming a horizontally centered row of items for the parent but it doesn't have to be
.parent {
  align-items: center;
  display: flex;
  justify-content: center;
}

.child {
  display: flex;
  align-items: center;
}

HASIL

HTML

<ul class="list">
  <li>This is the text</li>
  <li>This is another text</li>
  <li>This is another another text</li>
</ul>

Gunakan align-itemsbukannya align-selfdan saya juga menambahkan flex-directionuntuk column.

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

.list {
  display: flex;
  justify-content: center;
  flex-direction: column;  /* <--- I added this */
  align-items: center;   /* <--- Change here */
  height: 100px;
  width: 100%;
  background: silver;
}

.list li {  
  background: gold;
  height: 20%; 
}

Menggunakan display: flexAnda dapat mengontrol perataan vertikal elemen HTML.

.box {
  height: 100px;
  display: flex;
  align-items: center; /* Vertical */
  justify-content: center; /* Horizontal */
  border:2px solid black;
}

.box div {
  width: 100px;
  height: 20px;
  border:1px solid;
}

<div class="box">
  <div>Hello</div>
  <p>World</p>
</div>

Anda dapat mengubah uldan limenampilkan ke tabledan table-cell. Maka, vertical-alignakan bekerja untuk Anda:

ul {
    height: 20%;
    width: 100%;
    display: table;
}

li {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    background: silver;
    width: 100%; 
}

http://codepen.io/anon/pen/pckvK