एक div में वर्टिकल अलाइन एलिमेंट्स कैसे करें?

Question

मेरे पास दो छवियों और एक के साथ एक div है h1। उन सभी को एक दूसरे के बगल में, div के भीतर लंबवत संरेखित करने की आवश्यकता है।

छवियों में से एक absoluteको div के भीतर तैनात करने की आवश्यकता है ।

सभी सामान्य ब्राउज़रों पर काम करने के लिए सीएसएस की क्या आवश्यकता है?

<div id="header">
    <img src=".." ></img>
    <h1>testing...</h1>
    <img src="..."></img>
</div>

Comments

मैंने वर्टिकल अलाइन करने के सभी तरीकों की एक सूची बनाई। मैं इसे यहाँ छोड़ने जा रहा हूँ: jsfiddle.net/techsin/FAwku/1

— मुहम्मद उमर

यहाँ एक div के भीतर एक तत्व को केंद्र में रखने के दो सरल तरीके हैं, लंबवत, क्षैतिज या दोनों (शुद्ध CSS): stackoverflow.com/a/31977476/3597276

— माइकल बेंजामिन

मार्जिन-टॉप: ऑटो और मार्जिन-बॉटम: ऑटो (मामलों के लिए काम करता है)।

— अपंग

Answer 1

वाह, यह समस्या लोकप्रिय है। यह vertical-alignसंपत्ति में गलतफहमी पर आधारित है । यह उत्कृष्ट लेख इसे समझाता है:

vertical-alignगैविन किस्टनर द्वारा समझ , या "कैसे (नहीं) लंबवत केंद्र सामग्री के लिए" ।

"सीएसएस में केंद्र कैसे करें" एक महान वेब टूल है जो विभिन्न परिस्थितियों के लिए आवश्यक सीएसएस केंद्रित विशेषताओं को खोजने में मदद करता है।

---

संक्षेप में _{^{(और लिंक रोट को रोकने के लिए)}} :

• इनलाइन तत्वों (और केवल इनलाइन तत्वों) को उनके संदर्भ में लंबवत रूप से संरेखित किया जा सकता है vertical-align: middle। हालांकि, "संदर्भ" पूरे माता-पिता कंटेनर की ऊंचाई नहीं है, यह उस पाठ पंक्ति की ऊंचाई है जो वे jsfiddle उदाहरण में हैं
• ब्लॉक तत्वों के लिए, ऊर्ध्वाधर संरेखण कठिन है और दृढ़ता से विशिष्ट स्थिति पर निर्भर करता है:
  • भीतरी तत्व एक हो सकता है, तो निश्चित ऊंचाई , आप अपनी स्थिति को बना सकते हैं absoluteऔर इसके निर्दिष्ट height, margin-topऔर topस्थिति। jsfiddle उदाहरण
  • यदि केन्द्रित तत्व में एक ही रेखा होती है और इसकी मूल ऊंचाई तय हो जाती है, तो आप कंटेनर की line-heightऊंचाई को भरने के लिए बस सेट कर सकते हैं । यह विधि मेरे अनुभव में काफी बहुमुखी है। jsfiddle उदाहरण
  • ... ऐसे और भी विशेष मामले हैं।

Comments

"वैध" समाधान (इसलिए नहीं vertical-align: middle) के साथ समस्या यह है कि आपको एक निश्चित ऊंचाई निर्दिष्ट करनी होगी। उत्तरदायी वेब डिज़ाइन के लिए बहुत संभव नहीं है ।

— एमिली

मेरे पास यह संरचना थी: <div ऊँचाई = "## px"> मेरा पाठ </ div> मेरे लिए काम ने संपत्ति लाइन सेट की। उसी ऊंचाई का उपयोग करके समान ऊँचाई की संपत्ति में उपयोग किया गया: '## px' (## क्योंकि यह मान है मेरे मामले में गतिशील है) धन्यवाद

— patricK

यह भी inline-blockऔर table-cellतत्वों के साथ काम करता है । यदि आप इसके साथ समस्या कर रहे हैं, line-heightतो कंटेनर तत्व (यानी संदर्भ) को समायोजित करने का प्रयास करें क्योंकि यह vertical-alignलाइन बॉक्स गणना में उपयोग किया जाता है ।

— एलेक्स डब्ल्यू

css-tricks.com/centering-css-complete-guide <- यहां प्रस्तुत कुछ अच्छे विकल्प, ने अपने आप को ज्यादातर समय टेबल / टेबल-सेल समाधान का सहारा

— लेते हुए पाया है

यह टूल (howtocenterincsss.com) बहुत बढ़िया है क्योंकि यह मेरे मौजूदा सीएसएस के अंदर बॉक्स के ठीक बाहर काम करता है ! वह सुपर रेयर है। पुराने दिनों को याद रखें जहां आपको कुछ उदाहरणों से पूरी स्टाइलशीट की नकल करनी थी, कभी-कभी उदाहरण भी HTML तब एक-दूसरे को हटाते हैं और एक दूसरे के बाद तत्वों का नाम बदल देते हैं जब तक कि मुझे इसकी आवश्यकता न हो। इस साइट के लिए मामला नहीं है!

— कोनस्टेंटिन

Answer 2

अब जब फ्लेक्सबॉक्स समर्थन बढ़ रहा है, तो यह सीएसएस युक्त तत्व पर लागू होता है जो निहित आइटम को लंबवत रूप से केंद्र में रखेगा:

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

यदि आप एक्सप्लोरर 10 और पुराने (<4.4) एंड्रॉइड ब्राउज़र को भी लक्षित करना चाहते हैं, तो उपसर्ग संस्करण का उपयोग करें:

.container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
}

Comments

एक अच्छा समाधान, धन्यवाद। क्या आप सुझाव दे सकते हैं कि फ्लेक्सबॉक्स को क्षैतिज स्क्रॉलबार प्रदर्शित करने के लिए, आंतरिक तत्व कंटेनर से बड़ा है या नहीं? (मैं कंटेनर के भीतर आंतरिक तत्व को ज़ूम करने योग्य / स्क्रॉल करने योग्य बनाने की कोशिश कर रहा हूं, जैसे पावरपॉइंट में कैनवास)? क्या यह सभी के लिए संभव है?

— बोरिस बुर्कोव

@YazidErman यह समाधान flexbox पर निर्भर करता है इसलिए नहीं, केवल IE 10 और इसके बाद के संस्करण समर्थन या किसी अन्य आधुनिक ब्राउज़र caniuse.com/#search=flexbox Flexbox महान है जहाँ यह समर्थित है, लेकिन यह हर जगह नहीं है। डिस्प्ले टेबल और टेबल सेल शायद सबसे अच्छा समाधान है वास्तव में, कंटेनर को केवल टेबल होने की आवश्यकता होती है, तत्व केंद्रित किया जा रहा है एक तत्व को डिस्प्ले टेबल सेल के साथ लपेटा जाता है तो बस कुछ अन्य उत्तर के रूप में यहां इंगित कर सकते हैं।

— शुनहुसैन

मेरे लिए यह इतना कठिन क्यों था> <<उत्तर के लिए धन्यवाद! पुष्टि कर सकते हैं कि यह मेरे लिए एक ऐसे परिदृश्य में काम कर रहा है जहाँ अन्य उत्तर काम नहीं करते थे।

— माइकल मैककेना

फ्लेक्सबॉक्स पर उपयोगी सीएसएस ट्रिक्स गाइड तब align-itemsअनुभाग देखें

— icc97

2020 में हम flexbox caniuse.com/#feat=flexbox

— tonygatta

Answer 3

मैंने इस बहुत ही सरल कोड का उपयोग किया है:

HTML:

<div class="ext-box">
    <div class="int-box">
        <h2>Some txt</h2>
        <p>bla bla bla</p>
    </div>
</div>

सीएसएस:

div.ext-box { display: table; width:100%;}
div.int-box { display: table-cell; vertical-align: middle; }

जाहिर है, चाहे आप एक का उपयोग करें .classया #id, परिणाम नहीं बदलेगा।

Comments

यहां संरेखण (शीर्ष-मध्य-तल और बाएं-केंद्र-दाएं) की सभी नौ संभावनाओं का एक पूरा उदाहरण है: jsfiddle.net/webMac/0swk9hk5

— webMac

2020 में हम flexbox caniuse.com/#feat=flexbox

— tonygatta

मेरे लिए एकदम सही काम करता है

— huynq0911

Answer 4

इसने मेरे लिए काम किया:

.vcontainer {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
}

Comments

तो यह अब "ब्लॉक" तत्व नहीं है?

— पेसियर

फिर यदि आप क्षैतिज संरेखित करना चाहते हैं margin : 0 auto, तो यह काम नहीं करेगाdisplay: table-cell

— Ortomala Lokni

Answer 5

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

Comments

मुझे लगता है कि यह समाधान सबसे तेज और समझने में सबसे आसान है। शायद यह इसलिए है क्योंकि मैं चयनित जवाब देने के लिए पर्याप्त धैर्य नहीं रखता था। फ्लेक्सबॉक्स सभी चीजें!

— modulitos

justify-content: centerक्षैतिज केंद्रित होने की मेरी कमी के अतिरिक्त

— शमूएल स्लेड

Answer 6

मेरे एक मित्र की एक तकनीक:

HTML:

<div style="height:100px; border:1px solid;">
    <p style="border:1px dotted;">I'm vertically centered.</p>
</div>

सीएसएस:

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

यहाँ डेमो

Comments

: इस तकनीक में अधिक विस्तार से वर्णन किया गया है यहाँ css-tricks.com/centering-in-the-unknown

— nerdess

Answer 7

ब्लॉक तत्वों को केंद्र में रखने के लिए (IE9 और इसके बाद के संस्करण में काम करता है), एक आवरण की आवश्यकता होती है div:

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

Comments

यह विधि तत्वों को "आधा पिक्सेल" पर रखे जाने के कारण धुंधली हो सकती है। इसके लिए एक समाधान तत्व के परिप्रेक्ष्य को निर्धारित करना है। रूपांतर: परिप्रेक्ष्य (1px) अनुवाद (-50%);

— साइमन

Answer 8

उन सभी को div के भीतर लंबवत संरेखित करने की आवश्यकता है

संरेखित कैसे ? छवियों के शीर्ष पाठ के शीर्ष के साथ गठबंधन?

छवियों में से एक को div के भीतर पूर्ण स्थिति में होना चाहिए।

DIV के सापेक्ष बिल्कुल स्थित है? शायद आप यह पता लगा सकते हैं कि आप क्या खोज रहे हैं ...?

fd ने निरपेक्ष स्थिति के लिए चरणों का वर्णन किया है, साथ ही H1तत्व के प्रदर्शन को समायोजित किया है जैसे कि छवियां इसके साथ इनलाइन दिखाई देंगी। उस के लिए, मैं जोड़ता हूँ कि आप vertical-alignशैली का उपयोग करके छवियों को संरेखित कर सकते हैं:

#header h1 { display: inline; }
#header img { vertical-align: middle; }

... यह शीर्ष लेख और छवियों को एक साथ रखा जाएगा, शीर्ष किनारों के साथ गठबंधन किया जाएगा। अन्य संरेखण विकल्प मौजूद हैं; प्रलेखन देखें । आपको DIV को छोड़ने और H1तत्वों के अंदर की छवियों को स्थानांतरित करने के लिए यह फायदेमंद हो सकता है - यह कंटेनर को सिमेंटिक मूल्य प्रदान करता है, और इसके प्रदर्शन को समायोजित करने की आवश्यकता को हटा देता है H1:

<h1 id=header">
   <img src=".." ></img>
   testing...
   <img src="..."></img>
</h1>

Answer 9

इस सूत्र का उपयोग करें, और यह बिना दरार के हमेशा काम करेगा:

#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* For explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%;}

#inner {position: relative; top: -50%} /* For explorer only */
/* Optional: #inner[id] {position: static;} */

<div id="outer">
  <div id="middle">
    <div id="inner">
      any text
      any height
      any content, for example generated from DB
      everything is vertically centered
    </div>
  </div>
</div>

Comments

मैंने कभी इस तरह के चयनकर्ता "# राउटर [आईडी]" को नहीं देखा है। उसे क्या करना चाहिए? अगर मेरे पास आईडी के बजाय कक्षा होगी तो क्या होगा?

— एलेक्सा एड्रियन

Answer 10

लगभग सभी तरीकों को ऊंचाई निर्दिष्ट करने की आवश्यकता होती है, लेकिन अक्सर हमारे पास कोई ऊंचाई नहीं होती है।
तो यहाँ एक CSS3 3 लाइन ट्रिक है जिसे ऊंचाई जानने की आवश्यकता नहीं है।

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

यह IE9 में भी समर्थित है।

इसके विक्रेता उपसर्गों के साथ:

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

स्रोत: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Comments

लेकिन यह तभी काम करता है जब तत्व के माता-पिता की ऊंचाई तय हो। प्रतिशत मान के साथ संपत्ति 'शीर्ष' केवल निश्चित ऊंचाई के साथ कंटेनर में काम करता है, सही है?

— ucdream

हाँ, यह केवल कुछ मामलों के लिए काम करता है, मुझे बाद में इस तरीके से समस्याएँ आईं ... बात यह है कि सबसे अधिक संभावनाएँ हैं और जैसे ही आपको एक की आवश्यकता है, जब तक आप सभी को अच्छी तरह से प्राप्त न कर लें, क्योंकि सभी तरीके ऐसी चीजें मिलीं जो किसी विशेष मामले में काम नहीं करेंगी ...

— शैडोब

Answer 11

दो तरीकों से, आप तत्वों को लंबवत और क्षैतिज रूप से संरेखित कर सकते हैं

1. बूटस्ट्रैप ४
2. CSS3

1. बूटस्ट्रैप 4.3.X

ऊर्ध्वाधर संरेखण के लिए: d-flex align-items-center

क्षैतिज संरेखण के लिए: d-flex justify-content-center

.container {
    height: 180px;
    width:100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
rel="stylesheet"/>

<div class="d-flex align-items-center justify-content-center bg-info container">
  <div class="bg-light p-2">I am in Center</div>
</div>

2. सीएसएस 3

.container {
    display: flex;
    align-items: center;  // verticall center
    justify-content: center; // horizontally center

    background-color: #17a2b8;
    height: 180px;
    width:100%;
}

.child {
  background-color: #f8f9fa;
  padding: 0.5rem;
}

<div class="container">
  <div class="child">I am in Center</div>
</div>

Comments

दोनों ही तरीके मूल रूप से एक जैसे हैं क्योंकि बूटस्ट्रैप इसमें एक ही फ्लेक्स विशेषताओं का उपयोग करता है।

— एमएक्स।

बूटस्ट्रैप जादू नहीं है। यह सभी को प्रभावित करने वाली बहुत ही सीएसएस सीमाओं के अधीन है। यह सिर्फ छुपा है कि यह एवीजी से क्या करता है। उपयोगकर्ता।

— जेसनजेन

Answer 12

मेरी चाल 1 पंक्ति और 1 स्तंभ के साथ div को एक तालिका के अंदर रखना है, चौड़ाई और ऊंचाई का 100% सेट करें, और संपत्ति ऊर्ध्वाधर-संरेखित करें - मध्य।

<div>

    <table style="width:100%; height:100%;">
        <tr>
            <td style="vertical-align:middle;">
                BUTTON TEXT
            </td>
        </tr>
    </table>

</div>

फिडल: http://jsfiddle.net/joan16v/sbqjnn9q/

Comments

यह बहुत अधिक सिर-खरोंच से बचने का सबसे अच्छा तरीका लगता है। मैं अभी भी उलझन में हूं कि सीएसएस में एक ऊर्ध्वाधर संरेखित मानक क्यों नहीं है।

— कोकोडोको

Answer 13

# माता-पिता में बच्चे को केंद्र बनाने के 3 तरीके

• पूर्ण स्थिति निर्धारण विधि
• फ्लेक्सबॉक्स विधि

• ट्रांसफ़ॉर्म / ट्रांसलेशन मेथड

  

  डेमो

/* 1st way */
.parent1 {
  background: darkcyan;
   width: 200px;
   height: 200px;
   position: relative;
}
.child1 {
  background: white;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -15px;
}

/* 2nd way */
.parent2 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: darkcyan;
  height: 200px;
  width: 200px;
}
.child2 {
  background: white;
  height: 30px;
  width: 30px;
}

/* 3rd way */
.parent3 {
  position: relative;
  height: 200px;
  width: 200px;
  background: darkcyan;
}
.child3 {
  background: white;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="parent1">
  <div class="child1"></div>
</div>
<hr />

<div class="parent2">
  <div class="child2"></div>
</div>
<hr />

<div class="parent3">
  <div class="child3"></div>
</div>

Answer 14

CSS से वर्टिकल सेंटर का उपयोग करके, आप बाहरी कंटेनरों को टेबल की तरह काम कर सकते हैं, और कंटेंट को टेबल सेल की तरह। इस प्रारूप में आपकी वस्तुएँ केंद्रित रहेंगी। :)

मैंने JSFiddle में कई वस्तुओं को एक उदाहरण के लिए रखा है, लेकिन मूल विचार इस तरह है:

एचटीएमएल

<div class="circle">
  <div class="content">
    Some text
  </div>
</div>

सीएसएस

 .circle {
   /* act as a table so we can center vertically its child */
   display: table;
   /* set dimensions */
   height: 200px;
   width: 200px;
   /* horizontal center text */
   text-align: center;
   /* create a red circle */
   border-radius: 100%;
   background: red;
 }

 .content {
   /* act as a table cell */
   display: table-cell;
   /* and now we can vertically center! */
   vertical-align: middle;
   /* some basic markup */
   font-size: 30px;
   font-weight: bold;
   color: white;
 }

कई वस्तुओं उदाहरण:

एचटीएमएल

<div class="container">
  <div class="content">

    <div class="centerhoriz">

      <div class="circle">
        <div class="content">
          Some text
        </div><!-- content -->
      </div><!-- circle -->

      <div class="square">
        <div class="content">
          <div id="smallcircle"></div>
        </div><!-- content -->
      </div><!-- square -->

    </div><!-- center-horiz -->

  </div><!-- content -->
</div><!-- container -->

सीएसएस

.container {
  display: table;
  height: 500px;
  width: 300px;
  text-align: center;
  background: lightblue;
}

.centerhoriz {
  display: inline-block;
}

.circle {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: red;
  border-radius: 100%;
  margin: 10px;
}

.square {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: blue;
  margin: 10px;
}

.content {
  display: table-cell;
  vertical-align: middle;
  font-size: 30px;
  font-weight: bold;
  color: white;
}

#smallcircle {
  display: inline-block;
  height: 50px;
  width: 50px;
  background: green;
  border-radius: 100%;
}

परिणाम

https://jsfiddle.net/martjemeyer/ybs032uc/1/

Answer 15

डिफ़ॉल्ट रूप से h1 एक ब्लॉक तत्व है और पहली img के बाद लाइन पर रेंडर करेगा, और ब्लॉक के बाद दूसरी img लाइन पर दिखाई देगा।

इसे होने से रोकने के लिए आप इनलाइन प्रवाह व्यवहार के लिए h1 सेट कर सकते हैं:

#header > h1 { display: inline; }

Div के अंदर img को पूरी तरह से पोजिशन करने के लिए , आपको ठीक से काम करने से पहले "ज्ञात आकार" रखने के लिए युक्त div को सेट करना होगा। मेरे अनुभव में, आपको डिफ़ॉल्ट - स्थिति से दूर स्थिति विशेषता को भी बदलना होगा: मेरे लिए सापेक्ष कार्य:

#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }

यदि आपको वह काम करने के लिए मिल सकता है, तो आप चाहते हैं कि आप जिस प्रभाव को चाहते हैं, उसे प्राप्त करने के लिए न्यूनतम आवश्यक विशेषताओं को प्राप्त करने के लिए उत्तरोत्तर ऊंचाई, चौड़ाई, स्थिति विशेषताओं को हटाने की कोशिश कर सकते हैं।

अपडेट करें:

यहाँ एक पूर्ण उदाहरण है जो फ़ायरफ़ॉक्स 3 पर काम करता है:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Example of vertical positioning inside a div</title>
        <style type="text/css">
            #header > h1 { display: inline; }
            #header { border: solid 1px red; 
                      position: relative; }
            #img-for-abs-positioning { position: absolute;
                                       bottom: -1em; right: 2em; }
        </style>
    </head>

    <body>
        <div id="header">
            <img src="#" alt="Image 1" width="40" height="40" />
            <h1>Header</h1>
            <img src="#" alt="Image 2" width="40" height="40" 
                 id="img-for-abs-positioning" />
        </div>
    </body>
</html>

Comments

मुझे ध्यान देना चाहिए कि सही DOCTYPE होने से कभी-कभी सीएसएस कितना बड़ा अंतर कर सकता है, खासकर इंटरनेट एक्सप्लोरर पर। मैं आपको एक सख्त मानकों मोड के साथ संरेखित करने के लिए ज्ञात एक DOCTYPE को चुनने की सलाह दूंगा ताकि आप ब्राउज़रों के बीच अधिक सुसंगत व्यवहार की उम्मीद कर सकें।

— माइक ट्यूनीक्लिफ

मैं ब्राउज़रों के बीच किसी भी निरंतरता की 'उम्मीद' नहीं करूँगा .. यह सुनिश्चित करने का एकमात्र तरीका है कि परीक्षण करें: /

— कोकौला

Answer 16

हम तत्व के आकार की गणना करने के लिए एक सीएसएस फ़ंक्शन गणना का उपयोग कर सकते हैं और फिर उसके अनुसार बाल तत्व को स्थिति दे सकते हैं।

उदाहरण HTML:

<div class="box">
    <span><a href="#">Some Text</a></span>
</div>

और सीएसएस:

.box {
    display: block;
    background: #60D3E8;
    position: relative;
    width: 300px;
    height: 200px;
    text-align: center;

}
.box span {
    font: bold 20px/20px 'source code pro', sans-serif;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 10px);
}
a {
    color: white;
    text-decoration: none;
}

यहां बनाया गया डेमो: https://jsfiddle.net/xnjq1t22/

यह समाधान उत्तरदायी div heightऔर साथ ही साथ अच्छी तरह से काम करता है width।

नोट: कैल्क फ़ंक्शन पुराने ब्राउज़रों के साथ संगतता के लिए परीक्षण नहीं किया गया है।

Answer 17

आज के अनुसार, मैंने CSS3 का उपयोग करके एक div में कई टेक्स्ट-लाइनों को लंबवत रूप से संरेखित करने के लिए एक नया समाधान पाया है (और मैं UI को सुशोभित करने के लिए बूटस्ट्रैप v3 ग्रिड सिस्टम का भी उपयोग कर रहा हूं), जो नीचे है:

.immediate-parent-of-text-containing-div{
    height: 50px;         /* or any fixed height that suits you.*/
}

.text-containing-div {
    display: inline-grid;
    align-items: center;
    text-align: center;
    height: 100%;
}

मेरी समझ के अनुसार, तत्व वाले पाठ के तत्काल माता-पिता के पास कुछ ऊंचाई होनी चाहिए। मुझे उम्मीद है कि यह आपकी भी मदद करेगा। धन्यवाद!

Comments

बहुत साफ समाधान। यह एक मेरे लिए अच्छी तरह से काम किया।

— अकालोंडा

Answer 18

यह करने के लिए मेरा नया पसंदीदा तरीका एक सीएसएस ग्रिड के साथ है:

/* technique */

.wrapper {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
}

/* visual emphasis */

.wrapper {
  border: 1px solid red;
  height: 180px;
  width: 400px;
}

img {
  width: 100px;
  height: 80px;
  background: #fafafa;
}

img:nth-child(2) {
  height: 120px;
}

<div class="wrapper">
  <img src="https://source.unsplash.com/random/100x80/?bear">
  <img src="https://source.unsplash.com/random/100x120/?lion">
  <img src="https://source.unsplash.com/random/100x80/?tiger">
</div>

Answer 19

बस div के अंदर एक एक सेल टेबल का उपयोग करें! बस सेल और टेबल की ऊंचाई और 100% के साथ सेट करें और आप ऊर्ध्वाधर-संरेखित का उपयोग कर सकते हैं।

Div के अंदर एक-कोशिका तालिका ऊर्ध्वाधर-संरेखित करती है और पाषाण युग के लिए पीछे संगत है!

Answer 20

मैं निम्नलिखित समाधान का उपयोग कर रहा हूँ (कोई स्थिति नहीं है और कोई लाइन की ऊँचाई के साथ) एक वर्ष से अधिक है, यह IE 7 और 8 के साथ भी काम करता है।

<style>
.outer {
    font-size: 0;
    width: 400px;
    height: 400px;
    background: orange;
    text-align: center;
    display: inline-block;
}

.outer .emptyDiv {
    height: 100%;
    background: orange;
    visibility: collapse;
}

.outer .inner {
    padding: 10px;
    background: red;
    font: bold 12px Arial;
}

.verticalCenter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
</style>

<div class="outer">
    <div class="emptyDiv verticalCenter"></div>
    <div class="inner verticalCenter">
        <p>Line 1</p>
        <p>Line 2</p>
    </div>
</div>

Answer 21

यह एक div के अंदर एक i तत्व के लिए मेरा व्यक्तिगत समाधान है

JSFiddle उदाहरण

एचटीएमएल

<div class="circle">
    <i class="fa fa-plus icon">
</i></div>

सीएसएस

.circle {
   border-radius: 50%;
   color: blue;
   background-color: red;
   height:100px;
   width:100px;
   text-align: center;
   line-height: 100px;
}

.icon {
  font-size: 50px;
  vertical-align: middle;
}

Answer 22

मेरे लिए, इसने इस तरह से काम किया:

<div style="width:70px; height:68px; float:right; display: table-cell; line-height: 68px">
    <a href="javascript:void(0)" style="margin-left: 4px; line-height: 2" class="btn btn-primary">Login</a>
</div>

बूटस्ट्रैप कक्षाओं का उपयोग करके "ए" तत्व एक बटन में परिवर्तित हो जाता है, और यह अब बाहरी "div" के अंदर लंबवत केंद्रित है।

Answer 23

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

<div class="outdiv">
      <div class="indiv">
         <span>test1</span>
         <span>test2</span>
      </div>
    </div>

उसके बाद मेरे उदाहरण में आवरण div या outiviv के लिए निम्नलिखित css लागू करें

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

Comments

कोड केवल उत्तर हतोत्साहित करते हैं। कृपया कुछ स्पष्टीकरण जोड़ें कि यह समस्या को कैसे हल करता है, या यह मौजूदा उत्तरों से कैसे भिन्न है। समीक्षा से

— निक

Answer 24

सिर्फ यह:

<div>
    <table style="width: 100%; height: 100%">
        <tr>
            <td style="width: 100%; height: 100%; vertical-align: middle;">
               What ever you want vertically-aligned
            </td>
        </tr>
    </table>
</div>

Div के अंदर एक-कोशिका तालिका ऊर्ध्वाधर-संरेखित करती है और पाषाण युग के लिए पीछे संगत है!

Answer 25

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <style type="text/css">
            #style_center { position:relative; top:50%; left:50%; }
            #style_center_absolute { position:absolute; top:50px; left:50px; }
            <!--#style_center { position:relative; top:50%; left:50%; height:50px; margin-top:-25px; }-->
        </style>
    </head>

    <body>
        <div style="height:200px; width:200px; background:#00FF00">
            <div id="style_center">+</div>
        </div>
    </body>
</html>

Answer 26

यहाँ सिर्फ एक और (उत्तरदायी) दृष्टिकोण है:

html,
    body {
        height: 100%;
    }
    body {
        margin: 0;
    }

    .table {
        display: table;
        width:  auto;
        table-layout:auto;
        height: 100%;
    }
        .table:nth-child(even) {
            background: #a9edc3;
        }
        .table:nth-child(odd) {
            background: #eda9ce;
        }

    .tr {
        display: table-row;
    }
    .td {
        display: table-cell;
        width: 50%;
        vertical-align: middle;
    }

http://jsfiddle.net/herrfischerhamburg/JcVxz/

Answer 27

मैं एक .NET लड़का हूँ जो अभी वेब प्रोग्रामिंग में मिला है। मैंने CSS (ठीक है, थोड़ा सा) का उपयोग नहीं किया। मैंने jQuery के .css फ़ंक्शन के साथ ऊर्ध्वाधर केंद्र को पूरा करने के लिए थोड़ा जावास्क्रिप्ट का उपयोग किया।

मैं अपने टेस्ट से सब कुछ पोस्ट कर रहा हूं। यह शायद अति सुंदर नहीं है, लेकिन यह अब तक काम करता है।

script.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

        <script type="application/javascript">
            function centerElementVertically(id) {
                var btnDivHeight = $(id).outerHeight();
                var prnt = $(id).parent();
                var parentHeight = prnt.outerHeight();

                var newTop = ((parentHeight - btnDivHeight) / 2) + 'px';
                var newPct = newTop / parentHeight+'%;';

                $(id).css({top: newTop});
            }

            function showAlert(){
                alert("alert");
            }

            $(window).load(()=>{
                centerElementVertically('#buttonRight');
                centerElementVertically('#buttonLeft');
                centerElementVertically('#testerbtn')
            });

            $(window).resize(()=>{
                centerElementVertically('#buttonRight');
                centerElementVertically('#buttonLeft');
                centerElementVertically('#testerbtn')
            })
        </script>

        <style>
            #div1 {
                position:relative;
                height: 33%;
                background-color: red;
                overflow: hidden;
            }
            #buttonLeft {
                position: relative;
                float:left;
                width:50%;
                height:20%;
                background-color: cornsilk;
            }
            #buttonRight {
                position: relative;
                float:right;
                width:50%;
                height:50%;
                background-color: darkorchid;
            }
            #testerbtn {
                position: absolute;
            }
            body {
                background-color: aqua;
            }
        </style>

        <body>
            <div id="div1">
                <div id="buttonLeft">
                    <button id="testerbtn">tester</button>
                </div>
                <div id="buttonRight"></div>
            </div>
        </body>
    </head>
</html>

Comments

आप नए वेब डेवलपर्स को सिखा रहे हैं कि चीजों को कैसे गलत किया जाए, HTML सामग्री को परिभाषित करने के लिए है, CSS HTML को स्टाइल करने के लिए है, और जावास्क्रिप्ट शर्तों के आधार पर रनटाइम में हेरफेर करने के लिए है। उन लोगों को मिलाकर जल्दी से स्पेगेटी और प्रदर्शन गहन कोड हो सकता है

— ओवरकोडर

Answer 28

<div id="header" style="display: table-cell; vertical-align:middle;">

...

या सीएसएस

.someClass
{
   display: table-cell;
   vertical-align:middle;
}

ब्राउज़र कवरेज

Comments

ऊर्ध्वाधर-संरेखित गुण लागू नहीं होता है क्योंकि div प्रदर्शित होता है: डिफ़ॉल्ट रूप से ब्लॉक करें और इसे बदलने के लिए कुछ भी नहीं किया गया प्रतीत होता है।

— क्वेंटिन

जाहिरा तौर पर प्रदर्शन को अपडेट किया गया था table-cell, जो vertical-align: middle;काम करता है। इससे भी बेहतर, यह नेस्टेड आवरण / बफर डिव की आवश्यकता के बिना काम करता है, और यह पाठ और छवियों (या दोनों) के लिए काम करता है, और आपको स्थिति गुणों को बदलने की आवश्यकता नहीं है।

— MSpreij

यह एक काम करता है। यह डिस्प्ले को टेबल-सेल में बदलता है जो वर्टिकल-अलाइन प्रॉपर्टी लेता है। पता नहीं लोग इसे क्यों वोट देते हैं।

— टेक्ससब्रूस

हाँ, जहाँ तक मुझे पता है कि यह एक div में किसी भी चीज़ को वर्टिकल करने का सबसे कम घुसपैठ वाला तरीका है। +1

— Pma

ठीक है, शायद मैं अपने निष्कर्षों के साथ बहुत जल्दी था ... प्रदर्शन को जोड़ते हुए: टेबल-सेल ब्रेक डिव मार्जिन और अतिरिक्त सीमा को डिव के बाहर प्रदर्शित किया जाता है, बॉर्डर-त्रिज्या के साथ संयुक्त बॉर्डर

— डीवी के