Bir flexbox içindeki metni dikey olarak nasıl hizalayabilirim?

Bazı içeriği dikey olarak hizalamak için flexbox kullanmak istiyorum, <li>ancak büyük bir başarı elde edemiyorum.

Çevrimiçi kontrol ettim ve öğreticilerin çoğu aslında align-items:centerebeveyn üzerindeki esnek ayarlardan alan bir sarıcı div kullanıyor , ancak merak ediyorum bu ek öğeyi kesmek mümkün mü?

Liste öğesi yüksekliği dinamik olacağından bu örnekte flexbox kullanmayı seçtim %.

* {
  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>

Bunun yerine kullanmanın align-self: centerkullanımını align-items: center.

Değiştirmeye flex-directionveya kullanmaya gerek yok text-align.

İşte tüm bunların çalışması için kodunuz, tek bir ayarlama ile:

ul {
  height: 100%;
}

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

Tesis esnek ürünleralign-self için geçerlidir . Bunun dışında , üst öğesi ( veya) olmadığından veya uygulanmadığından esnek bir öğe değildir .liuldisplay: flexdisplay: inline-flex

Bu nedenle, ulesnek bir kap lideğil, esnek bir öğe değildir ve align-selfhiçbir etkisi yoktur.

align-itemsMülkiyet benzer align-selfo uygulanır dışında esnek kaplarda .

Bu yana libir esnek konteyner, align-itemsdikey olarak alt öğeleri merkezi kullanılabilir.

* {
  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>

kodlama demosu

Teknik olarak, işte nasıl align-itemsve align-selfçalışıyor ...

align-itemsMülkiyet (taşıyıcılar) varsayılan değerini belirler align-self(öğeler üzerinde). Bu nedenle, align-items: centertüm esnek öğelerin olarak ayarlanacağı anlamına gelir align-self: center.

Ancak, align-selföğeleri ayrı ayrı ayarlayarak bu varsayılanı geçersiz kılabilirsiniz .

Örneğin, eşit yükseklik sütunları isteyebilirsiniz, bu nedenle kap olarak ayarlanır align-items: stretch. Ancak, bir öğenin üstüne sabitlenmesi gerekir, bu nedenle olarak ayarlanır align-self: flex-start.

misal

Metin nasıl esnek bir öğe?

Bazı insanlar nasıl bir metin akışı merak ediyor olabilir ...

<li>This is the text</li>

'nin alt öğesidir li.

Bunun nedeni, satır içi düzey öğesi tarafından açıkça sarılmamış olan metnin, satır içi kutu tarafından algoritmik olarak sarılmasıdır. Bu, onu ebeveynin anonim satır içi öğesi ve alt öğesi yapar .

CSS spesifikasyonundan:

9.2.2.1 Anonim satır içi kutular

Bir blok kabı öğesinin içinde doğrudan bulunan tüm metinler, anonim satır içi öğe olarak değerlendirilmelidir.

Flexbox özelliği benzer davranışlar sağlar.

4. Esnek Ürünler

Esnek bir kabın her akış içi alt öğesi, bir esnek öğe haline gelir ve doğrudan bir esnek kabın içinde bulunan her bitişik metin akışı, anonim bir esnek öğeye sarılır.

Bu nedenle, içindeki metin liesnek bir öğedir.

En çok oy verilen cevap, OP'nin yayınladığı ve içeriğin (metnin) bir öğenin içine sarıldığı bu özel sorunu çözmek içindir inline-block. Bazı durumlar, normal bir öğeyi , benim durumumda da uygulanan bir kabın içinde dikey olarak ortalamakla ilgili olabilir , böylece ihtiyacınız olan tek şey:

align-self: center;

En iyi hareket, bir flexbox'ı bir flexbox'ın içine yerleştirmektir . Tek yapmanız gereken çocuğa vermek align-items: center. Bu, metni üst öğesinin içindeki dikey olarak hizalar.

// 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;
}

SONUÇ

HTML

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

Kullanım align-itemsyerine align-selfve ben de eklendi flex-directioniçin 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%; 
}

Kullanarak display: flexHTML öğelerinin dikey hizalamasını kontrol edebilirsiniz.

.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>

Sen değiştirebilir ulve lisergileyen tableve table-cell. O zaman, vertical-alignsizin için çalışır:

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