<div> में लंबवत संरेखित मध्य

Question

मैं की ऊंचाई रखना चाहते हैं #abc divपर 50pxऔर पाठ के बीच में खड़ी संरेखित करने के लिए div।

body{
  padding: 0;
  margin: 0;
  margin: 0px auto;
}

#main{
  position: relative;
  background-color:blue;
  width:500px;
  height:500px;
}

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  vertical-align:middle;
}

<div id="main">
 <div id="abc">
     asdfasdfafasdfasdf
 </div>
</div>

Answer 1

आप उपयोग कर सकते हैं line-height: 50px;, आपको vertical-align: middle;वहां जरूरत नहीं होगी ।

डेमो

---

इसके बाद के संस्करण, यदि आप कई लाइनों है असफल हो जायेगी ताकि मामले में आप का उपयोग कर अपने पाठ लपेट कर सकते हैं spanउपयोग की तुलना में और display: table-cell;और display: table;के साथ vertical-align: middle;, यह भी उपयोग करने के लिए मत भूलना width: 100%;के लिए#abc

डेमो

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  display: table;
  width: 100%;
}

#abc span {
  vertical-align:middle;
  display: table-cell;
}

---

एक अन्य समाधान मैं यहां सोच सकता हूं कि transformसंपत्ति का उपयोग करना है translateY()जहां Yस्पष्ट रूप से वाई एक्सिस के लिए खड़ा है। यह बहुत सीधे आगे है ... आपको बस इतना करना है कि तत्वों की स्थिति absoluteऔर बाद की स्थिति 50%को topनकारात्मक अक्ष के साथ अक्ष से और अनुवाद से सेट करें-50%

div {
  height: 100px;
  width: 100px;
  background-color: tomato;
  position: relative;
}

p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

डेमो

ध्यान दें कि यह पुराने ब्राउज़रों पर समर्थित नहीं होगा, उदाहरण के लिए IE8, लेकिन आप क्रमशः IE9 और क्रोम और फ़ायरफ़ॉक्स के अन्य पुराने ब्राउज़र संस्करणों का उपयोग करके -ms, -mozऔर -webkitउपसर्ग बना सकते हैं।

अधिक जानकारी के लिए transform, आप यहाँ देख सकते हैं ।

Comments

मुझे इस सरल रेखा-ऊंचाई समाधान को मेरे पूरे पेशेवर जीवन को जानने की आवश्यकता है और केवल अब इसे सीखा है। शुक्रिया, मिस्टर एलियन।

— नाथन बीच

Answer 2

यह सरल है: माता-पिता को यह दे दो:

display: table;

और बच्चे को यह दे दो:

display: table-cell;
vertical-align: middle;

बस!

.parent{
    display: table;
}
.child{
    display: table-cell;
    vertical-align: middle;
    padding-left: 20px;
}

<div class="parent">
    <div class="child">
        Test
    </div>
    <div class="child">
        Test Test Test <br/> Test Test Test
    </div>
    <div class="child">
        Test Test Test <br/> Test Test Test <br/> Test Test Test
    </div>
<div>

Comments

यह खराब है क्योंकि यह एक हैक के रूप में तालिका का उपयोग कर रहा है, यह अधिकांश मामलों के लिए काम कर सकता है, लेकिन जब आप 'तालिका' की चौड़ाई को बदलना चाहते हैं, तो यह ठीक से काम नहीं करने वाला है (जो कि मुझे इस समाधान के साथ अब समस्या हो रही है) )

— केविन सरल

मुझे display:table;यह काम करने के लिए माता-पिता को जोड़ने की आवश्यकता नहीं थी ।

— VincentPerrin.com

शायद यह एक हैक है ... लेकिन यह काम करता है, और अधिकांश अन्य समाधान केवल विशिष्ट मामलों में काम करते हैं और अक्सर हमारे मामले में उपयोग करने योग्य नहीं होते हैं।

— जेरी

इस समाधान का लाभ: सभी प्रकार की सामग्री के साथ काम करता है (न केवल पाठ के लिए, और न केवल एक पंक्ति ...)

— जेरी

Answer 3

पुराना सवाल है, लेकिन आजकल CSS3 ऊर्ध्वाधर संरेखण वास्तव में सरल बनाता है !

बस #abcनिम्नलिखित सीएसएस में जोड़ें :

display:flex;
align-items:center;

सरल डेमो

मूल प्रश्न डेमो अपडेट किया गया

सरल उदाहरण:

.vertical-align-content {
  background-color:#f18c16;
  height:150px;
  display:flex;
  align-items:center;
  /* Uncomment next line to get horizontal align also */
  /* justify-content:center; */
}

<div class="vertical-align-content">
  Hodor!
</div>

Comments

मैं यह भी सुझाव दूंगा: प्रदर्शन: ग्रिड; संरेखित आइटम: केंद्र; यह बेहतर काम करता है जब आपके पास एक से अधिक ऑब्जेक्ट एक साथ लंबवत संरेखित करने के लिए होता है

— लियोनार्डो डागा

कौन से ब्राउज़र का समर्थन करता है CSS3 ?

— किनिकेत

@Kiquenet, वैश्विक बाजार के 92% caniuse.com/#search=align-items

— डैनियल कुकल

परफेक्ट! सरल और आसान .. बस कंटेनर में जोड़ें

— उज्जवल सिंह

Answer 4

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

.element {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

पूरा लेख यहाँ पढ़ें ।

Comments

यह चीजों को धुंधला कर सकता है क्योंकि परिवर्तनों के परिणामस्वरूप आधे पिक्सेल स्थानों पर तैनात होने वाली चीजें हो सकती हैं।

— केविन व्हीलर

उस मुद्दे को लक्षित करने वाले पोस्ट पर एक अपडेट है। जनक पर transform-style: preserve-3d;:!

— एंड्री

Answer 5

आप लाइन की ऊँचाई को div की ऊँचाई के रूप में उपयोग कर सकते हैं। लेकिन मेरे लिए सबसे अच्छा समाधान यह है ->position:relative; top:50%; transform:translate(0,50%);

Answer 6

कैसे जोड़ना है line-height?

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  vertical-align:middle;
  line-height: 45px;
}

फील, लाइन-हाइट

या paddingपर #abc। यह पैडिंग के साथ परिणाम है

अपडेट करें

अपने सीएसएस में जोड़ें:

#abc img{
   vertical-align: middle;
}

परिणाम । आशा है कि आप क्या देख रहे हैं।

Comments

जिस तरह से मैं यह काम करने के लिए चाहते हैं काफी काम नहीं करता है, जब आप ऊंचाई या रेखा की ऊंचाई को बदलते हैं, तो कुछ सही नहीं है। पहले से ही एक जवाब मिल गया है, वैसे भी धन्यवाद

— बीमार

Answer 7

इसे इस्तेमाल करे:

.main_div{
    display: table;
    width: 100%;
}
.cells {
    display: table-cell;
    vertical-align: middle;
}

एक div केंद्रित करने के लिए एक और तरीका:

<div id="parent">
    <div id="child">Content here</div>
</div>

#parent {position: relative;}

#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50px;
    height: 100px;
    margin: auto;
}

Answer 8

 div {
    height:200px;
    text-align: center;
    padding: 2px;
    border: 1px solid #000;
    background-color: green;
}

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

<div class="text-align-center"> Align center</div>

Comments

कृपया इसे समझाएं!

— पाल

Answer 9

ट्रांसलेट सीएसएस प्रॉपर्टी का उपयोग कंटेनर में अपने पाठ को लंबवत रूप से करने के लिए करें

<style>
.centertext{

    position: relative;
    top: 50%;
    transform: translateY(40%);

}
</style>

और फिर अपने युक्त DIV पर लागू करें

  <div class="centertext">
        <font style="color:white; font-size:20px;">   Your Text Here </font>
  </div>

अपनी आवश्यकताओं के अनुरूप अनुवाद प्रतिशत को समायोजित करें। उम्मीद है की यह मदद करेगा

Answer 10

यह कोड निश्चित ऊँचाई के बिना लंबवत मध्य और क्षैतिज केंद्र के लिए है।

.parent-class-name {
  position: relative;
}

.className {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}