काम नहीं कर प्रतिशत के रूप में लाइन ऊंचाई

Question 1

मुझे लाइन-ऊँचाई के साथ एक समस्या हो रही है कि मैं अपना सिर चारों ओर नहीं पा सकता हूं।

निम्नलिखित कोड एक div के भीतर एक छवि केंद्र होगा:

सीएसएस

.bar {
    height: 800px;
    width: 100%;
    line-height:800px;
    background-color: #000;
    text-align: center; 
}

.bar img {
    vertical-align: middle;   
}

एचटीएमएल

<div class="bar">
    <img src="http://27.media.tumblr.com/yHWA4oxH870ulxnoH7CkOSDR_500.jpg" alt="Foo Image" />
</div>

हालाँकि, अगर मैं लाइन की ऊँचाई को 100% तक बदल देता हूँ, तो लाइन की ऊँचाई प्रभावी नहीं होती (या कम से कम 100% div) नहीं बनती।

उदाहरण jsfiddle

क्या कोई जानता है कि मुझसे क्या गलती हो रही है?

Question 2

line-height: 100%उस तत्व के लिए फ़ॉन्ट आकार का 100% मतलब है, इसकी ऊंचाई का 100% नहीं। वास्तव में, लाइन ऊंचाई हमेशा फ़ॉन्ट आकार, नहीं ऊंचाई के सापेक्ष, जब तक कि अपने मूल्य निरपेक्ष लंबाई की एक इकाई (का उपयोग करता है px, pt, आदि)।

Question 3

मुझे पता है कि यह सवाल पुराना है, लेकिन मैंने पाया कि मेरे लिए सही वर्कअराउंड क्या है।

मैं इस सीएसएस को उस div में जोड़ता हूं जिसे मैं केंद्र में रखना चाहता हूं:

div:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

यह हर बार काम करता है और यह साफ है।

संपादित करें: बस पूरा करने के लिए, मैं scss का उपयोग करता हूं और मेरे पास एक आसान मिश्रण है, जिसमें मैं हर उस माता-पिता को शामिल करता हूं, जिनके सीधे बच्चे हैं जिन्हें मैं लंबवत केंद्रित करना चाहता हूं:

@mixin vertical-align($align: middle) {
  &:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: $align;
    // you can add font-size 0 here and restore in the children to prevent
    // the inline-block white-space to mess the width of your elements
    font-size: 0;
  }
  & > * {
    vertical-align: $align;
    // although you need to know the font-size, because "inherit" is 0
    font-size: 14px;
  }
}

पूर्ण स्पष्टीकरण: div:beforediv के अंदर एक तत्व जोड़ देगा, लेकिन उसके किसी भी बच्चे से पहले। उपयोग करते समय :beforeया :afterहमें एक content:घोषणा का उपयोग करना चाहिए अन्यथा कुछ भी नहीं होगा, लेकिन हमारे उद्देश्य के लिए, सामग्री खाली हो सकती है। फिर हम तत्व को उसके माता-पिता के समान लंबा बताते हैं, जब तक कि उसके माता-पिता की ऊंचाई को परिभाषित किया जाता है और यह तत्व कम से कम इनलाइन-ब्लॉक है। vertical-alignमाता-पिता से संबंधित स्वयं की ऊर्ध्वाधर स्थिति को परिभाषित करता है, क्योंकि इसके विपरीत text-alignकाम करता है।

@mixinघोषणा सास उपयोगकर्ताओं के लिए है और इसे इस तरह इस्तेमाल किया जाएगा:

div {
    @include vertical-align(middle)
}

Question 4

जब आप प्रतिशत का उपयोग लाइन-ऊंचाई के रूप में करते हैं तो यह डिव कंटेनर पर आधारित नहीं होता है, बल्कि इसके फॉन्ट-आकार के आधार पर होता है।

Question 5

लाइन-ऊँचाई: 100% केंद्र तत्वों को सीधा करने का एक आसान तरीका होगा, अगर इसकी गणना कंटेनर के संबंध में की जाती है, लेकिन यह बहुत आसान होगा, इसलिए यह काम नहीं करता है।

इसलिए इसके बजाय, यह लाइन-हाइट कहने का एक और तरीका है: 1em (दाएं?)

एक तत्व को लंबवत केंद्रित करने का दूसरा तरीका होगा:

.container {
     position:relative;
}
.center {
     position:absolute;
     top:0; left:0; bottom:0; right:0;
     margin: auto;
     /* for horiz left-align, try "margin: auto auto auto 0" */
}

Question 6

सुंदर नहीं हो सकता है, लेकिन यह काम कर रहा है, और इसका अर्थ है;

<div class="bar" style="display: table; text-align: center;">
    <img style="display: table-cell; vertical-align: middle;" src="http://27.media.tumblr.com/yHWA4oxH870ulxnoH7CkOSDR_500.jpg" alt="Foo Image" />
</div>

प्रदर्शन: टेबल-सेल एक तत्व को वर्टिकल एलाइन करने के लिए अद्वितीय टेबल एबिलिटी देता है (कम से कम मुझे लगता है कि यह अद्वितीय है)

Question 7

यह एक बहुत देर से जवाब है, हालांकि आधुनिक ब्राउज़रों में, यह मानते हुए कि मूल तत्व स्क्रीन ऊंचाई का 100% है, साथ ही आप vhव्यूपोर्ट यूनिट का उपयोग कर सकते हैं । बेला

line-height: 100vh;

ब्राउज़र का समर्थन

Question 8

यह समाधान IE9 और इसके बाद के संस्करण में काम करता है। पहले हम बच्चे की शीर्ष स्थिति 50% (माता-पिता के मध्य) निर्धारित करते हैं। फिर translateनियम का उपयोग करते हुए , बच्चे को उसकी वास्तविक ऊंचाई के आधे भाग तक शिफ्ट करें। मुख्य लाभ यह है कि हमें बच्चे की ऊंचाई को परिभाषित करने की आवश्यकता नहीं है, यह ब्राउज़र द्वारा गतिशील रूप से गणना की जाती है। JSFiddle

.bar {
    height: 500px;
    text-align: center;
    background: green;
}
.bar img {
    position: relative;
    top: 50%;
    transform: translate(0, -50%);
}

Question 9

एक अधिक आधुनिक दृष्टिकोण इसके लिए फ्लेक्सबॉक्स का उपयोग करना है, यह सरल और क्लीनर है। हालाँकि, फ्लेक्सबॉक्स क्या है inline-block, floatया हुआ करता था , से एक पूरी तरह से अलग प्रतिमान positionहै।

.parentआपके अंदर आइटम संरेखित करने के लिए:

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

वह इसके बारे में है। के बच्चे flexमाता-पिता को स्वचालित रूप से फ्लेक्स बच्चे आइटम के लिए बदल रहे हैं।

आपको फ्लेक्सबॉक्स के बारे में अधिक पढ़ना चाहिए, शुरू करने के लिए एक अच्छी जगह यह धोखा शीट है: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Question 10

आप उस तत्व की ऊँचाई के आधार पर लाइन-ऊँचाई सेट कर सकते हैं । यदि तत्व ऊंचाई 200px का अर्थ है, तो आपको पाठ को केंद्र में रखने के लिए लाइन की ऊंचाई 200px निर्धारित करने की आवश्यकता है।

span {
  height: 200px;
  width: 200px; 
  border: 1px solid black;
  line-height: 200px; 
  display: block;
}

<span>Im vertically center</span>

स्निपेट का विस्तार करें

Question 11

यह आधुनिक समाधान है जिसमें आपको कंटेनर डिव या बाहरी डिव में निम्नलिखित सीएसएस सेट करने की आवश्यकता है।

.outer-div {
  display: flex;
  justify-content: center;
  align-items: center; 
}

एक और निम्नलिखित समाधान उस तत्व पर लागू हो सकता है जिसे आप लंबवत बनाना चाहते हैं। ध्यान दें कि बाहरी या कंटेनर div होना चाहिए

.inner-div {
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}

ध्यान दें कि बाहरी या कंटेनर div स्थिति सापेक्ष होनी चाहिए।