फ्लेक्सबॉक्स के अंदर पाठ को लंबवत संरेखित कैसे करें?

Question

मैं फ्लेक्सबॉक्स का उपयोग करना चाहता हूं, <li>लेकिन कुछ सामग्री को लंबवत रूप से संरेखित करना है, लेकिन बड़ी सफलता नहीं है।

मैंने ऑनलाइन जाँच की है और कई ट्यूटोरियल वास्तव में एक रैपर div का उपयोग करते हैं, जो 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>

Answer 1

उपयोग align-self: centerकरने के बजाय align-items: center।

बदलने flex-directionया उपयोग करने की कोई आवश्यकता नहीं है text-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नहीं है, एक फ्लेक्स आइटम नहीं है, और 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>

कोडपेन डेमो

---

तकनीकी रूप से, यहां बताया गया है कि कैसे align-itemsऔर क्या align-selfकाम ...

align-itemsसंपत्ति (कंटेनर पर) का डिफ़ॉल्ट मान सेट align-self(वस्तुओं पर)। इसलिए, align-items: centerइसका मतलब है कि सभी फ्लेक्स आइटम सेट किए जाएंगे align-self: center।

लेकिन आप align-selfअलग-अलग मदों पर समायोजन करके इस डिफ़ॉल्ट को ओवरराइड कर सकते हैं ।

उदाहरण के लिए, आप समान ऊँचाई वाले स्तंभ चाहते हो सकते हैं, इसलिए कंटेनर सेट है align-items: stretch। हालांकि, एक आइटम को शीर्ष पर पिन किया जाना चाहिए, इसलिए इसे सेट किया गया है align-self: flex-start।

उदाहरण

---

टेक्स्ट एक फ्लेक्स आइटम कैसे है?

कुछ लोग सोच रहे होंगे कि पाठ का एक भाग कैसे ...

<li>This is the text</li>

का एक बच्चा तत्व है li।

कारण यह है कि इनलाइन स्तर के तत्व द्वारा स्पष्ट रूप से लिपटे हुए पाठ को इनलाइन बॉक्स द्वारा एल्गोरिथ्मिक रूप से लपेटा नहीं जाता है। यह इसे एक अनाम इनलाइन तत्व और माता-पिता का बच्चा बनाता है ।

सीएसएस कल्पना से:

9.2.2.1 बेनामी इनलाइन बॉक्स

कोई भी पाठ जो सीधे ब्लॉक कंटेनर तत्व के अंदर समाहित है, उसे एक अनाम इनलाइन तत्व माना जाना चाहिए।

Flexbox विनिर्देश समान व्यवहार के लिए प्रदान करता है।

4. फ्लेक्स आइटम

एक फ्लेक्स कंटेनर का प्रत्येक इन-फ्लो बच्चा एक फ्लेक्स आइटम बन जाता है, और टेक्स्ट का प्रत्येक सन्निहित भाग जो सीधे एक फ्लेक्स कंटेनर के अंदर होता है, एक गुमनाम फ्लेक्स आइटम में लपेटा जाता है।

इसलिए, पाठ liएक फ्लेक्स आइटम है।

Comments

मुझे पसंद है align-items: baseline। विभिन्न यूनिकोड वर्णों आदि से आने वाली विभिन्न ऊंचाइयों के लिए अच्छा है

— qräbnö

बेनामी इनलाइन बक्से की अवधारणा को समझाने और जोड़ने के लिए धन्यवाद ... वास्तव में यह स्पष्ट करने में मदद करता है कि कुछ प्रभाव आप परीक्षण और त्रुटि से प्राप्त कर सकते हैं जिस तरह से वे करते हैं।

— चौकोर

Answer 2

ओपी द्वारा पोस्ट की गई इस विशिष्ट समस्या को हल करने के लिए सबसे अधिक मतदान का जवाब है , जहां एक inline-blockतत्व के अंदर सामग्री (पाठ) को लपेटा जा रहा था । कुछ मामले एक कंटेनर के अंदर एक सामान्य तत्व को केंद्र में रखने के बारे में हो सकते हैं , जो मेरे मामले में भी लागू होता है, इसलिए इसके लिए आपको आवश्यक है:

align-self: center;

Answer 3

सबसे अच्छा कदम एक 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;
}

Comments

यदि आप एक परिपूर्ण केंद्रित पाठ चाहते हैं। text-align:centerअकेले काम नहीं करता। align-items: centerइसके साथ प्रयोग करें ।

— तजवेनी

Answer 4

परिणाम

एचटीएमएल

<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-directionकरने के लिए जोड़ा column।

सीएसएस

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

Answer 5

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

Answer 6

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

Comments

कोड-ओनली उत्तर बहुत उपयोगी नहीं हैं ... टिप्पणी या आपके द्वारा किए गए स्पष्टीकरण को जोड़ें, और यह क्यों काम करता है।

— random_user_name

Answer 7

उपयोग करने से 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>

Answer 8

आप को बदल सकता है 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

Comments

तब तक अच्छी तरह से काम करता है जब तक आप वहां कोई अन्य सूची आइटम नहीं जोड़ते।

— जॉर्ज

सच ... लेकिन इसका कभी उल्लेख नहीं किया गया

— LcSalazar

क्या आपने ली के बजाय उल की ऊंचाई पर स्विच किया है? प्रत्येक ली ऊंचाई गतिशील होगी इसलिए यह कुछ मैं im डर का उपयोग नहीं कर सकता है

— स्टाइलिस्ट

@LcSalazar यदि आप केवल एक आइटम का इरादा रखते हैं तो आप आमतौर पर एक सूची का उपयोग नहीं करेंगे। यही कारण है कि divs हैं।

— बजे बेन विज़नेस

फिर से सच ... लेकिन मैं यह नहीं कह रहा हूं कि यह सही परिदृश्य है। मैंने सिर्फ एक समाधान पोस्ट किया है जो इस प्रश्न का उत्तर देता है। मुझे उम्मीद है कि यह जानकारी किसी और के लिए काम आ सकती है जो इसे पढ़ता है और इसका एक और परिदृश्य है ...

— LcSalazar