วิธีการจัดแนวข้อความภายใน flexbox?

ฉันต้องการใช้ flexbox เพื่อจัดแนวเนื้อหาบางส่วนในแนวตั้ง<li>แต่ไม่ประสบความสำเร็จ

ฉันตรวจสอบออนไลน์แล้วและบทเรียนจำนวนมากใช้ div wrapper ซึ่งได้รับalign-items:centerจากการตั้งค่าแบบยืดหยุ่นบนแม่ แต่ฉันสงสัยว่าเป็นไปได้ไหมที่จะตัดองค์ประกอบเพิ่มเติมนี้ออกไป

ฉันเลือกที่จะใช้ flexbox %ในกรณีนี้เป็นความสูงของรายการจะเป็นแบบไดนามิก

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

แทนการใช้การใช้งานalign-self: centeralign-items: center

ไม่จำเป็นต้องมีการเปลี่ยนแปลงไม่ได้หรือการใช้งานflex-directiontext-align

นี่คือรหัสของคุณซึ่งมีการปรับค่าเดียวเพื่อให้การทำงานทั้งหมด:

ul {
  height: 100%;
}

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

align-selfคุณสมบัตินำไปใช้กับรายการดิ้น ยกเว้นรายการของคุณliไม่ใช่รายการยืดหยุ่นเนื่องจากรายการหลัก - รายการul- ไม่มีdisplay: flexหรือdisplay: inline-flexใช้

ดังนั้น, ulไม่ใช่คอนเทนเนอร์แบบยืดหยุ่น, liไม่ใช่รายการ flex, และalign-selfไม่มีผลกระทบ

align-itemsคุณสมบัติคล้ายกับการalign-selfยกเว้นนำไปใช้กับภาชนะบรรจุดิ้น

เนื่องจากliเป็นคอนเทนเนอร์แบบยืดหยุ่นจึงalign-itemsสามารถใช้เพื่อจัดองค์ประกอบของลูกให้อยู่ตรงกลาง

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

การสาธิต codepen

ในทางเทคนิคนี่คือวิธีการalign-itemsและการalign-selfทำงาน ...

align-itemsคุณสมบัติ (บนบรรจุภัณฑ์) กำหนดค่าเริ่มต้นของalign-self(ในรายการ) ดังนั้นวิธีการดิ้นรายการทั้งหมดจะถูกตั้งค่าalign-items: centeralign-self: center

แต่คุณสามารถลบล้างค่าเริ่มต้นนี้ได้โดยปรับalign-selfรายการแต่ละรายการ

align-items: stretchตัวอย่างเช่นคุณอาจต้องการคอลัมน์ความสูงเท่ากันดังนั้นภาชนะที่มีการตั้งค่า align-self: flex-startแต่หนึ่งในรายการจะต้องตรึงไปด้านบนจึงมีการตั้งค่า

ตัวอย่าง

ข้อความเป็นรายการที่ยืดหยุ่นอย่างไร

บางคนอาจสงสัยว่าข้อความวิ่งเป็นอย่างไร ...

<li>This is the text</li>

liเป็นองค์ประกอบลูกของ

เหตุผลคือข้อความที่ไม่ได้ถูกห่ออย่างชัดเจนโดยองค์ประกอบระดับอินไลน์ถูกห่อหุ้มแบบอัลกอริทึมโดยกล่องแบบอินไลน์ สิ่งนี้ทำให้มันเป็นองค์ประกอบอินไลน์แบบไม่ระบุชื่อและลูกของผู้ปกครอง

จากข้อมูลจำเพาะ CSS:

9.2.2.1 กล่องแบบอินไลน์ที่ไม่ระบุชื่อ

ข้อความใด ๆ ที่มีอยู่ในองค์ประกอบคอนเทนเนอร์บล็อกโดยตรงจะต้องถือว่าเป็นองค์ประกอบแบบอินไลน์ที่ไม่ระบุชื่อ

ข้อกำหนดคุณสมบัติ flexbox จัดให้มีลักษณะการทำงานที่คล้ายกัน

4. รายการที่ยืดหยุ่น

ชายด์แบบ in-flow แต่ละตัวของ flex container จะกลายเป็นไอเท็ม flex และแต่ละข้อความที่ต่อเนื่องที่อยู่ภายใน flex container จะถูกห่อด้วยไอเท็ม flex แบบไม่ระบุชื่อ

ดังนั้นข้อความในliรายการยืดหยุ่น

คำตอบที่โหวตมากที่สุดคือการแก้ปัญหาเฉพาะที่โพสต์โดย OP ซึ่งเนื้อหา (ข้อความ) ถูกห่อในinline-blockองค์ประกอบ บางกรณีอาจเป็นเรื่องเกี่ยวกับการจัดองค์ประกอบกลางตามแนวตั้งภายในคอนเทนเนอร์ซึ่งใช้ในกรณีของฉันดังนั้นสิ่งที่คุณต้องการคือ:

align-self: center;

ย้ายที่ดีที่สุดคือเพียงรังภายใน flexbox ของ flexbox align-items: centerสิ่งที่คุณต้องทำคือให้เด็ก สิ่งนี้จะจัดแนวข้อความภายในของพาเรนต์

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

ผลลัพธ์

HTML

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

ใช้align-itemsแทนalign-selfและฉันยังเพิ่มการflex-directioncolumn

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

การใช้display: flexคุณสามารถควบคุมการจัดตำแหน่งแนวตั้งขององค์ประกอบ 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>

คุณสามารถเปลี่ยนulและliแสดงการและtable table-cellจากนั้นvertical-alignจะทำงานให้คุณ:

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