Bagaimana cara menyejajarkan teks secara vertikal di dalam flexbox?

424

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>

styler
sumber

Jawaban:

544

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.

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.

Michael Benjamin
sumber
2
Saya suka align-items: baseline. Baik untuk ketinggian berbeda yang berasal dari karakter unicode yang berbeda, dll.
qräbnö
1
Terima kasih telah menjelaskan dan menautkan ke konsep kotak inline Anonim ... benar-benar membantu menjelaskan mengapa beberapa efek yang dapat Anda capai dengan cara coba-coba bekerja seperti yang mereka lakukan.
squarecandy
39

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;
Mohd Abdul Mujib
sumber
25

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;
}
serraosay
sumber
Jika Anda ingin teks berpusat sempurna. text-align:centertidak bekerja sendiri. Gunakan align-items: centerdengannya.
Tzwenni
8

HASIL

masukkan deskripsi gambar di sini

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%; 
}
Wilson
sumber
1

* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
}

ul {
  height: 100%;
}

li {
 display: flex;
 justify-content: center;
 align-items: center;
 background: silver;
 width: 100%;
 height: 20%;
}
<ul>
  <li>This is the text</li>
</ul>

Anatoly Gorchuk
sumber
0

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

Swapnil
sumber
Jawaban khusus kode tidak sangat berguna ... tambahkan komentar atau penjelasan tentang apa yang Anda lakukan, dan mengapa itu berhasil.
random_user_name
0

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>

Ankur prajapati
sumber
-6

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

LcSalazar
sumber
Berfungsi dengan baik sampai Anda menambahkan item daftar lain di sana.
George
1
Benar ... Tapi itu tidak pernah disebutkan
LcSalazar
Anda sudah beralih ketinggian untuk berada di ul bukannya li? setiap tinggi li akan menjadi dinamis sehingga ini bukan sesuatu yang bisa saya gunakan im takut
styler
@LcSalazar Anda biasanya tidak akan menggunakan daftar jika Anda hanya bermaksud memiliki satu item. Itulah gunanya div.
Ben Visness
2
Benar lagi ... Tapi saya tidak mengatakan ini adalah skenario yang sempurna. Saya baru saja memposting solusi yang menjawab pertanyaan apa adanya. Saya harap informasi ini berguna bagi orang lain yang membacanya dan memiliki skenario lain ...
LcSalazar