मैं डिव में टेक्स्ट को लंबवत रूप से कैसे संरेखित करूं?

Question

मैं एक div के साथ पाठ संरेखित करने का सबसे प्रभावी तरीका खोजने की कोशिश कर रहा हूं। मैंने कुछ चीजों की कोशिश की है और कोई भी काम नहीं कर रहा है।

.testimonialText {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 150px;
  height: 309px;
  vertical-align: middle;
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  padding: 1em 0 1em 0;
}

<div class="testimonialText">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Comments

इस url पर एक उदाहरण है: http://css-tricks.com/vertically-center-multi-build-text/ ।

— cguzel

stackoverflow.com/questions/5703552/…

— जोश क्रोज़िएर

stackoverflow.com/questions/8865458/…

— Ohad श्नाइडर

css-tricks.com/centering-css-complete-guide

— user1063287

Answer 1

CSS में वर्टिकल सेंटिंग
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

लेख सारांश:

CSS 2 ब्राउज़र के लिए, कोई भी उपयोग कर सकता है display:table/display:table-cell सामग्री को केंद्र में है।

JSFiddle पर एक नमूना भी उपलब्ध है :

div { border:1px solid green;}

<div style="display: table; height: 400px; overflow: hidden;">
  <div style="display: table-cell; vertical-align: middle;">
    <div>
      everything is vertically centered in modern IE8+ and others.
    </div>
  </div>
</div>

#नए ब्राउज़रों से शैलियों को छिपाने के लिए पुराने ब्राउज़रों (इंटरनेट एक्सप्लोरर 6/7) के हैक को उपयोग में लाना संभव है।

div { border:1px solid green;}

<div style="display: table; height: 400px; #position: relative; overflow: hidden;">
  <div style=
    "#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
    <div style=" #position: relative; #top: -50%">
      everything is vertically centered
    </div>
  </div>
</div>

Comments

पहला लिंक बेहतर है, मुझे लगता है कि भले ही यह जटिल लगता है क्योंकि दूसरा लिंक टेक्स्ट की एक पंक्ति या एक छवि का उपयोग करता है, जिसकी आप ऊंचाई जानते हैं। यदि आपके पास पाठ की 2 या 3 पंक्तियाँ हैं या यदि आपको अपने पाठ की ऊँचाई का पता नहीं है, तो इसका कारण भिन्न होता है। वह लाइन-हाइट के साथ कैसे काम करेगा? इसलिए योग करने के लिए। मैंने पहले संस्करण का परीक्षण किया और यह IE, Firefox और CHROME पर काम करता है।

— रुल

मुझे समझ में नहीं आता है, हमें इस सामान के साथ क्यों हटना चाहिए? यह 21 वीं सदी है! क्यों वे सिर्फ लानत पाठ को सीएसएस में लंबवत संरेखित करने के लिए एक लानत विकल्प शामिल नहीं करते हैं ... जैसे: सामग्री-केंद्रित: दोनों या लंबवत या क्षैतिज रूप से। यह सिर्फ अविश्वसनीय है कि वर्षों से उपयोग किए जाने वाले टेक्नोलोजी इतने गूंगे हैं।

— अलेक्जेंडर.लज्जुस्किन

@ फ़्लेक्स्ट्रा: यही कारण है कि लोग अभी भी ग्रिड लेआउट के लिए तालिकाओं का उपयोग करते हैं। वर्टिकल अलाइन (या ऊंचाई और गतिशील डेटा के साथ कुछ भी) शुद्ध सीएसएस के साथ चुनौतीपूर्ण हो सकता है। आपको इस तरह से अजीब हैक करने के लिए तैयार रहना होगा (कुछ हद तक "लेआउट से अलग सामग्री" विचार को हरा देता है), या मल्टी-पास रेंडरिंग हिट ले लो और गैर-स्थिर तालिकाओं का उपयोग करें। मुझे एक बार भी अंत उपयोगकर्ताओं से शिकायत नहीं थी, tableइसके बावजूद कि मैं सीएसएस के प्रशंसकों के दिलों को नियमित रूप से तोड़ता हूं। अधिकांश एम डिजाइन केवल साधारण ब्लॉग और स्थिर साइटें। हम में से कुछ व्यवसाय सॉफ़्टवेयर का निर्माण करते हैं और घने डेटा डिस्प्ले की आवश्यकता होती है, और हमारे उपयोगकर्ता कार्यक्षमता के बारे में अधिक ध्यान रखते हैं।

— कुछ भी नहीं

हां। मुझे गलत मत समझो, अगर मैं एक "साइट" का निर्माण करता हूं तो मैं दुबला एचटीएमएल के साथ जाता हूं और शुद्ध सीएसएस पसंद करता हूं, लेकिन मुझे पता नहीं है कि मैंने कितनी बार अस्तर के सामान को घंटों तक कुश्ती किया, जब मैंने सिर्फ 'एफ' कहा था और इसका इस्तेमाल किया था table। चीजें अब बेहतर हैं, लेकिन हममें से कुछ जो व्यवसायिक वेब ऐप बनाते हैं, उन्हें पुराने ब्राउज़रों का समर्थन करना पड़ता है (IE6 अभी भी कुछ क्लाइंट्स पर उपयोग में है!), जबकि ब्लॉग बनाने वाले लोग बादलों में रह सकते हैं और दिखावा कर सकते हैं कि दुनिया में हर कोई एक है! तेज कनेक्शन, नया कंप्यूटर, और सीएसएस 3 के साथ एक्स ब्राउज़र का नवीनतम संस्करण, आदि। मामले में बिंदु: कुछ जीरा प्लगइन्स लेआउट के लिए एकल-पंक्ति तालिकाओं का उपयोग करते हैं (या वैसे भी)

— कुछ भी आवश्यक नहीं

यह काफी भयावह है कि तालिकाओं को पुराने जमाने की हैक के रूप में केवल एक नौसिखिया का उपयोग करेगा पर फेंक दिया जाता है, और यहां हम एक दूर के वर्कअराउंड के रूप में एक डीआईवी में "डिस्प्ले: टेबल-सेल" का उपयोग कर रहे हैं।

— नियति

Answer 2

आपको जोड़ने की आवश्यकता है line-height विशेषता और उस विशेषता की ऊंचाई से मेल खाना चाहिए div। आपके मामले में:

.center {
  height: 309px;
  line-height: 309px; /* same as height! */
}

<div class="center">
  A single line.
</div>

वास्तव में, आप संभवतः heightविशेषता को पूरी तरह से हटा सकते हैं।

यह केवल के लिए काम करता है पाठ की एक पंक्ति के , इसलिए सावधान रहें।

Comments

मेरा मानना ​​है कि यदि आप div में पाठ की एक पंक्ति है तो यह केवल मान्य है।

— 18

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

— डेविड

@ याकूबचेटिंग, हां यह करता है। एक समाधान के लिए मेरा जवाब देखें जो पाठ की कई पंक्तियों की अनुमति देता है।

— एडम टोमाट

प्रत्येक बच्चे को लाइन-ऊँचाई प्रचारित करती है

— KVM

प्रतिशत के साथ काम नहीं कर रहा: ऊंचाई: 100%; लाइन-ऊँचाई: 100%

— अल्बॅनक्स

Answer 3

यहाँ एक महान संसाधन है

से http://howtocenterincss.com/ :

CSS में केंद्रित होने से गधे में दर्द होता है। विभिन्न कारकों के आधार पर, इसे करने के लिए एक gazillion तरीके प्रतीत होते हैं। यह उन्हें समेकित करता है और आपको प्रत्येक स्थिति के लिए आवश्यक कोड देता है।

फ्लेक्सबॉक्स का उपयोग करना

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

यहाँ कुछ महान संसाधन हैं:

• Flexbox के लिए एक गाइड
• फ्लेक्सबॉक्स के साथ तत्वों को केंद्रित करना
• फ्लेक्सबॉक्स के लिए इंटरनेट एक्सप्लोरर 10 सिंटैक्स
• Flexbox के लिए समर्थन

ब्राउज़र उपसर्गों के साथ JSFiddle

li {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  /* Column | row */
}

<ul>
  <li>
    <p>Some Text</p>
  </li>
  <li>
    <p>A bit more text that goes on two lines</p>
  </li>
  <li>
    <p>Even more text that demonstrates how lines can span multiple lines</p>
  </li>
</ul>

एक और समाधान

यह ज़ीरोक्सीथ्री से है और आपको CSS की छह लाइनों के साथ कुछ भी केंद्र करने देता है

यह विधि Internet Explorer 8 और निम्न में समर्थित नहीं है ।

jsfiddle

p {
  text-align: center;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

<ul>
  <li>
    <p>Some Text</p>
  </li>
  <li>
    <p>A bit more text that goes on two lines</p>
  </li>
  <li>
    <p>Even more text that demonstrates how lines can span multiple lines</p>
  </li>
</ul>

पिछला उत्तर

चिह्नित उत्तर में लिंक के रूप में उपयोगी एक सरल और क्रॉस-ब्राउज़र दृष्टिकोण, थोड़ा पुराना है।

जावास्क्रिप्ट और सीएसएस लाइन ऊंचाइयों का सहारा लिए बिना एक अनियंत्रित सूची और एक div दोनों में लंबवत और क्षैतिज रूप से केंद्र पाठ कैसे करें । कोई फर्क नहीं पड़ता कि आपके पास कितना पाठ है, आपको किसी विशेष वर्ग को विशिष्ट सूचियों या विभाजनों पर लागू नहीं करना होगा (प्रत्येक के लिए कोड समान है)। यह इंटरनेट एक्सप्लोरर 9, इंटरनेट एक्सप्लोरर 8, इंटरनेट एक्सप्लोरर 7, इंटरनेट एक्सप्लोरर 6, फ़ायरफ़ॉक्स, क्रोम, ओपेरा और सफारी सहित सभी प्रमुख ब्राउज़रों पर काम करता है । दो विशेष स्टाइलशीट हैं (एक इंटरनेट एक्सप्लोरर 7 के लिए और दूसरी इंटरनेट एक्सप्लोरर 6 के लिए) उनकी सीएसएस सीमाओं के कारण उनकी मदद करने के लिए जो आधुनिक ब्राउज़रों के पास नहीं हैं।

एंडी हावर्ड - एक अव्यवस्थित सूची या div में लंबवत और क्षैतिज रूप से केंद्र पाठ कैसे करें

जैसा कि मैंने पिछले प्रोजेक्ट पर काम करने के लिए Internet Explorer 7/6 की ज्यादा परवाह नहीं की थी, मैंने थोड़े स्ट्रिप्ड डाउन वर्जन का इस्तेमाल किया (यानी इंटरनेट एक्सप्लोरर 7 और 6 में काम करने वाले सामान को हटा दिया)। यह किसी और के लिए उपयोगी हो सकता है ...

JSFiddle

.outerContainer {
  display: table;
  width: 100px;
  /* Width of parent */
  height: 100px;
  /* Height of parent */
  overflow: hidden;
}

.outerContainer .innerContainer {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

li {
  background: #ddd;
  width: 100px;
  height: 100px;
}

<ul>
  <li>
    <div class="outerContainer">
      <div class="innerContainer">
        <div class="element">
          <p>
            <!-- Content -->
            Content
          </p>
        </div>
      </div>
    </div>
  </li>

  <li>
    <div class="outerContainer">
      <div class="innerContainer">
        <div class="element">
          <p>
            <!-- Content -->
            Content
          </p>
        </div>
      </div>
    </div>
  </li>
</ul>

Comments

कोई दिक्कत नहीं है। मैं अभी भी उपयोग करना पसंद करता हूं, height: x; line-height: x;लेकिन अधिक बार मुझे पाठ की कई पंक्तियों की आवश्यकता नहीं है। इसलिए मैं इस समाधान से प्यार करता हूं। सरल, पुन: प्रयोज्य, क्रॉस-ब्राउज़र, कोई js और केवल एक छोटे से अतिरिक्त चिह्न की आवश्यकता है।

— एडम टोमैट

यदि पाठ बॉक्स से बड़ा है तो यह अतिप्रवाह करेगा। मैंने अतिप्रवाह को रोकने के लिए विभिन्न तरीकों की कोशिश की है, लेकिन वे सभी टेबल और टेबल-सेल डिस्प्ले के साथ प्रतीत होते हैं। जैसे ही मैं अतिप्रवाह को प्रतिबंधित करता हूं ऊर्ध्वाधर ऊर्ध्वाधर काम करना बंद कर देता है। jsfiddle.net/2HHLE कोई विचार?

— थॉमस डेविड बेकर

मेरे अपने प्रश्न का उत्तर देने के लिए यदि आप टेबल / टेबल-सेल div (s) को निश्चित चौड़ाई / ऊंचाई और अतिप्रवाह के साथ एक और div में रखते हैं: छिपा हुआ है जो कि चाल करेगा। मैंने इसे Bluebones.net/2013/03//

— थॉमस डेविड बेकर

@ThomasDavidBaker, अन्य समाधान यदि आपको गतिशील होने की आवश्यकता है तो 100% ऊंचाई निर्धारित करना है। यहाँ एक jsfiddle है , मूल रूप से अभी-अभी बदली height: 100px;करने height: 100%;के लिए दोनों liऔर के लिए .outerContainer।

— एडम टोमैट

यहाँ एक नेलपार्क नहीं बनना चाहते लेकिन ज़ीरोक्सिथ्री से दूसरे समाधान में। CSS में "- wekbit -transform: TranslateY (-50%);" फिर भी, बहुत धन्यवाद !! महान समाधान!

— ज्ञानी

Answer 4

इसके साथ आसान है display: flex। निम्नलिखित विधि के साथ, में पाठ divलंबवत केंद्रित होगा:

div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  /* More style: */
  height: 300px;
  background-color: #888;
}

<div>
  Your text here.
</div>

और यदि आप चाहते हैं, क्षैतिज:

div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  /* More style: */
  height: 300px;
  background-color: #888;
}

<div>
  Your text here.
</div>

आपको आवश्यक ब्राउज़र संस्करण देखना चाहिए; पुराने संस्करणों में कोड काम नहीं करता है।

Comments

छोटा और मीठा ... जिस तरह से यह कुछ सरल करना चाहिए। IE 11, क्रोम और फ़ायरफ़ॉक्स पर काम करता है ... मेरे लिए काफी अच्छा है

— छप

यह उत्तर svg में विदेशी वस्तुओं के अंदर पोजिशनिंग टेक्स्ट के साथ काम करता है। धन्यवाद!

मेरा मानना ​​है: फ्लेक्स सब कुछ के लिए उपाय है!

— डेनिसकोलॉडिन

text-align: centerयह आवश्यक भी है, क्योंकि लंबे पाठ भरण चौड़ाई और बाईं ओर संरेखित होंगे

— डेनिसकोलडिन

मुझे हमेशा इससे परेशानी होती थी, और मैं लाइन की ऊँचाई बढ़ाने के उत्तर से बिल्कुल नफरत करता था। यह वास्तव में अच्छी तरह से काम किया।

— जेड लिंच

Answer 5

मैं निम्नलिखित लंबवत केंद्र यादृच्छिक तत्वों को आसानी से उपयोग करता हूं:

HTML:

<div style="height: 200px">
    <div id="mytext">This is vertically aligned text within a div</div>
</div>

सीएसएस:

#mytext {
    position: relative;
    top: 50%; 
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

यह मेरे पाठ को div200px-उच्च बाहरी के सटीक ऊर्ध्वाधर मध्य में केंद्रित करता है div। ध्यान दें कि आपको -webkit-अपने ब्राउज़र के लिए यह कार्य करने के लिए एक ब्राउज़र उपसर्ग (जैसे मेरे मामले में) का उपयोग करना पड़ सकता है।

यह न केवल पाठ के लिए, बल्कि अन्य तत्वों के लिए भी काम करता है।

Comments

मुझे अधिक विश्वसनीय परिणाम मिले position: absolute;- धन्यवाद! NB आप शामिल करना चाहते हैं -ms-transformया IE कुछ और ऊपर सामान करेंगे

— Wilf

प्लंकर -web-kit-transformपहले डालने का सुझाव देता है transform। शायद जोड़ने से -ms-transform@ ToniMichelCaubet का मुद्दा हल हो सकता है।

— साकोविआस

Answer 6

आप यह प्रदर्शन 'टेबल-सेल' पर सेट करके और आवेदन करके कर सकते हैं vertical-align: middle;:

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

हालाँकि यह बिना किसी अनुमति के http://www.w3schools.com/cssref/pr_class_display.asp से कॉपी किए गए इस अंश के अनुसार इंटरनेट एक्सप्लोरर के सभी संस्करणों द्वारा समर्थित नहीं है ।

नोट: मान "इनलाइन-टेबल", "टेबल", "टेबल-कैप्शन", "टेबल-सेल", "टेबल-कॉलम", "टेबल-कॉलम-ग्रुप", "टेबल-पंक्ति", "टेबल-पंक्ति" -ग्रुप ", और" इनहेरिट "इंटरनेट एक्सप्लोरर 7 और उससे पहले के समर्थित नहीं हैं। Internet Explorer 8 को DOCTYPE की आवश्यकता है। Internet Explorer 9 मानों का समर्थन करता है।

निम्न तालिका http://www.w3schools.com/cssref/pr_class_display.asp से अनुमत प्रदर्शन मान भी दिखाती है ।

Comments

महान विचार! प्रदर्शन: टेबल-सेल के अन्य प्रभाव हैं लेकिन अगर आप उनके साथ ठीक हैं तो यह एक अच्छा समाधान है

— ब्रायन लो

तत्व की ऊंचाई को जोड़ने के लिए भी महत्वपूर्ण है।

— एलान पेराच

दुर्भाग्य से अतिप्रवाह: छिपा हुआ प्रदर्शन पर काम नहीं करता है: टेबल-सेल

— TheJeff

Answer 7

इन दिनों (हमें इंटरनेट एक्सप्लोरर 6-7-8 किसी भी अधिक की आवश्यकता नहीं है) मैं सिर्फ display: tableइस मुद्दे (या display: flex) के लिए सीएसएस का उपयोग करूंगा ।

---

पुराने ब्राउज़रों के लिए:

तालिका:

.vcenter {
    display: table;
    background: #eee; /* optional */
    width: 150px;
    height: 150px;
    text-align: center; /* optional */
}

.vcenter > :first-child {
    display: table-cell;
    vertical-align: middle;
}

<div class="vcenter">
  <p>This is my Text</p>
</div>

फ्लेक्स:

.vcenter {
    display: flex; /* <-- Here */
    align-items: center; /* <-- Here */
    justify-content: center; /* optional */
    height: 150px; /* <-- Here */
    background: #eee;  /* optional */
    width: 150px;
}

<div class="vcenter">
  <p>This is my text</p>
</div>

---

यह (वास्तव में था) इस मुद्दे के लिए मेरा पसंदीदा समाधान (सरल और बहुत अच्छी तरह से समर्थित ब्राउज़र):

div {
    margin: 5px;
    text-align: center;
    display: inline-block;
}

.vcenter {
    background: #eee;  /* optional */
    width: 150px;
    height: 150px;
}
.vcenter:before {
    content: " ";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    max-width: 0.001%; /* Just in case the text wrapps, you shouldn't notice it */
}

.vcenter > :first-child {
    display: inline-block;
    vertical-align: middle;
    max-width: 99.999%;
}

<div class="vcenter">
  <p>This is my text</p>
</div>
<div class="vcenter">
  <h4>This is my Text<br/>Text<br/>Text</h4>
</div>
<div class="vcenter">
  <div>
   <p>This is my</p>
   <p>Text</p>
  </div>
</div>

Comments

@ वह मूल रूप से पाठ (छद्म: पहले) के बगल में एक 0px चौड़ाई इनलाइन-ब्लॉक तत्व जोड़ रहा है। हालांकि, इस अशुद्ध ब्लॉक की 100% ऊंचाई है, जो चाल है। जैसा कि ब्लॉक और टेक्स्ट दोनों वी-गठबंधन हैं, यह उद्देश्य के अनुसार प्रस्तुत करता है।

— डैन एच।

सबसे अच्छा जवाब, स्वच्छ समाधान, IE8 समर्थित

— रोको

जब पाठ लपेटता है, तो आप इस के साथ समस्या कर सकते हैं। मैंने इसे नेस्टेड तत्व में निम्नलिखित जोड़कर तय किया: चौड़ाई: 95%; लंबवत-संरेखण: मध्य;

— trgraglia

यदि पाठ बहुत लंबा है, तो यह काम नहीं करता है। क्या आपके पास एक समाधान है? jsfiddle.net/cyxuy95q

— बीटा

जैसा कि आपकी पिछली टिप्पणी में बताया गया है, अधिकतम-चौड़ाई 95% jsfiddle.net/cyxuy95q/1

— Toni Michel Caubet

Answer 8

यह कोशिश करो, माता पिता div पर जोड़ें:

display: flex;
align-items: center;

Comments

मुझे यह पसंद है - सरल और आधुनिक ब्राउज़रों में काम करता है

— कैस्पर स्कोवगार्ड

Answer 9

यहां एक समाधान है जो पाठ की एक पंक्ति के लिए सबसे अच्छा काम करता है।

यदि लाइनों की संख्या ज्ञात हो तो यह कुछ ट्विकिंग के साथ बहु-पंक्ति वाले पाठ के लिए भी काम कर सकती है।

.testimonialText {
    font-size: 1em; /* Set a font size */
}
.testimonialText:before { /* Add a pseudo element */
    content: "";
    display: block;
    height: 50%;
    margin-top: -0.5em; /* Half of the font size */
}

यहाँ एक JSFiddle है ।

Answer 10

<!DOCTYPE html>
<html>

  <head>
    <style>
      .container {
        height: 250px;
        background: #f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-align: center;
        justify-content: center;
      }
      p{
        font-size: 24px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </body>

</html>

Comments

ऊर्ध्वाधर-संरेखित होने पर एक आकर्षण की तरह काम किया: मध्य; और बाकी सभी असफल रहे।

— चिवड़ा १३'१

Answer 11

आप Flexbox का उपयोग करके एक केंद्र के अंदर केंद्र पाठ को संरेखित कर सकते हैं।

<div>
   <p class="testimonialText">This is the testimonial text.</p>
</div>

div {
   display: flex;
   align-items: center;
}

आप इसके बारे में ए कंप्लीट गाइड टू फ्लेक्सबॉक्स में अधिक जान सकते हैं ।

Answer 12

इस सरल उपाय की जाँच करें:

एचटीएमएल

<div class="block-title"><h3>I'm a vertically centered element</h3></div>

सीएसएस

.block-title {
    float: left;
    display: block;
    width: 100%;
    height: 88px
}

.block-title h3 {
    display: table-cell;
    vertical-align: middle;
    height: inherit
}

JSFiddle

Answer 13

टेबल / टेबल-सेल का सहारा लिए बिना सामग्री को लंबवत रूप से संरेखित करने का एक सरल तरीका है:

http://jsfiddle.net/bBW5w/1/

इसमें मैंने एक अदृश्य (चौड़ाई = 0) div जोड़ा है जो कंटेनर की पूरी ऊँचाई को मानता है।

यह इंटरनेट एक्सप्लोरर और फ़ायरफ़ॉक्स (नवीनतम संस्करण) में काम करने लगता है। मैंने अन्य ब्राउज़रों के साथ जाँच नहीं की

  <div class="t">
     <div>
         everything is vertically centered in modern IE8+ and others.
     </div>
      <div></div>
   </div>

और निश्चित रूप से सीएसएस:

.t, .t > div:first-child
{
    border: 1px solid green;
}
.t
{
    height: 400px;
}
.t > div
{
    display: inline-block;
    vertical-align: middle
}
.t > div:last-child
{
    height: 100%;
}

Answer 14

यह सबसे साफ समाधान है जो मैंने पाया है (इंटरनेट एक्सप्लोरर 9+) और "बंद .5 पिक्सेल" समस्या के लिए एक फिक्स जोड़ता है जिसका उपयोग करके transform-styleअन्य उत्तर छोड़ दिए गए थे।

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

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

स्रोत: सीएसएस की सिर्फ 3 लाइनों के साथ कुछ भी लंबवत संरेखित करें

Answer 15

मूल्यों को न जानने के तत्व का एक सरल समाधान:

एचटीएमएल

<div class="main">
    <div class="center">
        whatever
    </div>
</div>

सीएसएस

.main {
    position: relative
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

Answer 16

एडम टोमाट के जवाब के अनुसार div में पाठ संरेखित करने के लिए JSFiddle उदाहरण तैयार किया गया था :

<div class="cells-block">    
    text<br/>in the block   
</div>

प्रदर्शन का उपयोग करके : सीएसएस में फ्लेक्स :

.cells-block {
    display: flex;
    flex-flow: column;
    align-items: center;       /* Vertically   */
    justify-content: flex-end; /* Horisontally */
    text-align: right;         /* Addition: for text's lines */
}

एक अन्य उदाहरण और एक ब्लॉग पोस्ट में कुछ स्पष्टीकरण के साथ ।

Answer 17

ग्रिड-आइटम पर मार्जिन ऑटो।

फ्लेक्सबॉक्स के समान, ग्रिड-आइटम पर मार्जिन ऑटो को लागू करना यह दोनों अक्षों पर केंद्रित है:

.container {
  display: grid;
}
.element {
  margin: auto;
}

Answer 18

फ्लेक्सबॉक्स ने मेरे लिए पूरी तरह से काम किया, माता-पिता के अंदर कई तत्वों को क्षैतिज और लंबवत रूप से केंद्रित किया।

HTML कोड:

<div class="parent-div">
    <div class="child-div">
      <a class="footer-link" href="https://www.github.com/">GitHub</a>
      <a class="footer-link" href="https://www.facebook.com/">Facebook</a>
      <p class="footer-copywrite">© 2019 Lorem Ipsum.</p>
    </div>
  </div>

CSS-Code:
कोड एक कॉलम में पैरेंट-डिव के अंदर सभी तत्वों को स्टैक्ड करता है, तत्वों को क्षैतिज और लंबवत रूप से केंद्रित करता है। मैंने दो एंकर तत्वों को एक ही पंक्ति (पंक्ति) पर रखने के लिए चाइल्ड-डिव का उपयोग किया। चाइल्ड-डिव के बिना सभी तीन तत्व (एंकर, एंकर और पैराग्राफ) एक-दूसरे के ऊपर पैरेंट-डिव के कॉलम के अंदर स्टैक्ड होते हैं। यहां केवल चाइल्ड-डिव को पैरेंट-डिव कॉलम के अंदर रखा जाता है।

/* */
.parent-div {
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

Answer 19

उपयोग:

h1 {
    margin: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.container {
    height: 200px;
    width: 500px;
    position: relative;
    border: 1px solid #eee;
}

<div class="container">
    <h1>Vertical align text</h1>
</div>

इस ट्रिक के साथ, आप कुछ भी संरेखित कर सकते हैं यदि आप इसे केंद्र में नहीं रखना चाहते हैं तो बाईं ओर संरेखित करें "0: 0"।

Answer 20

एचटीएमएल

<div class="relative"><!--used as a container-->
    <!-- add content here to to make some height and width
    example:<img src="" alt=""> -->
    <div class="absolute">
        <div class="table">
            <div class="table-cell">
                Vertical contents goes here
            </div>
        </div>
    </div>
</div>

सीएसएस

 .relative {
     position: relative;
 }
 .absolute {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background: rgba(0, 0, 0, 0.5);
 }
 .table {
     display: table;
     height: 100%;
     width: 100%;
     text-align: center;
     color: #fff;
 }
 .table-cell {
     display: table-cell;
     vertical-align: middle;
 }

Answer 21

फ्लेक्स का उपयोग करना, ब्राउज़रों के प्रतिपादन में अंतर के साथ सावधान रहना।

यह क्रोम और इंटरनेट एक्सप्लोरर दोनों के लिए अच्छा काम करता है:

.outer {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #ffc;
}

.inner {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;
    text-align: center;
    justify-content: center;
    align-items: center;
    background-color: #fcc;
}

<div class="outer"><div class="inner">Active Tasks</div></div>

केवल Chrome के साथ काम करने वाले इस से तुलना करें:

.outer {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #ffc;
}

.inner {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;
    background-color: #fcc;
}

<div class="outer">
<div class="inner"><span style=" margin: auto;">Active Tasks</span></div>
</div>

Answer 22

यह सीएसएस का उपयोग करते हुए divएक divपैटर्न में एक और भिन्नता है calc()।

<div style="height:300px; border:1px solid green;">
  Text in outer div.
  <div style="position:absolute; height:20px; top:calc(50% - 10px); border:1px solid red;)">
    Text in inner div.
  </div>
</div>

यह काम करता है, क्योंकि:

• position:absolutedivएक के भीतर सटीक नियुक्ति के लिएdiv
• हम भीतर की ऊंचाई को जानते हैंdiv क्योंकि हम इसे निर्धारित करते हैं 20px।
• calc(50% - 10px)के लिए 50% - आधा ऊंचाई भीतरी केंद्रित के लिएdiv

Comments

माता-पिता को स्थिति की आवश्यकता होगी: रिश्तेदार

— टोनी मिशेल क्युबेट

Answer 23

यह ठीक काम करता है:

एचटीएमएल

<div class="information">
    <span>Some text</span>
    <mat-icon>info_outline</mat-icon>
</div>

सास

.information {
    display: inline-block;
    padding: 4px 0;
    span {
        display: inline-block;
        vertical-align: middle;
    }
    mat-icon {
        vertical-align: middle;
    }
}

बिना और छवि टैग के साथ <mat-icon>(जो एक फ़ॉन्ट है)।

Answer 24

हम्म, स्पष्ट रूप से इसे हल करने के कई तरीके हैं।

लेकिन मेरे पास एक <div>बिल्कुल height:100%(वास्तव में, top:0;bottom:0और निश्चित चौड़ाई) स्थित है औरdisplay:table-cell बस पाठ को लंबवत रूप से काम करने के लिए काम नहीं किया है। मेरे समाधान के लिए एक आंतरिक अवधि तत्व की आवश्यकता थी, लेकिन मुझे लगता है कि कई अन्य समाधान भी करते हैं, इसलिए मैं इसे भी जोड़ सकता हूं:

मेरा कंटेनर एक है .labelऔर मैं चाहता हूं कि संख्या उसमें लंबवत रूप से केंद्रित हो। मैं यह बिल्कुल top:50%और सेटिंग की स्थिति से कियाline-height:0

<div class="label"><span>1.</span></div>

और सीएसएस निम्नानुसार है:

.label {
    position:absolute;
    top:0;
    bottom:0;
    width:30px;
}

.label>span {
    position:absolute;
    top:50%;
    line-height:0;
}

इसे कार्रवाई में देखें: http://jsfiddle.net/jcward/7gMLx/

Comments

अच्छा लगा क्योंकि यह सबसे सरल उपाय है। डाउनसाइड यह केवल सिंगल लाइन टेक्स्ट के लिए काम करता है, उदाहरण के कांटे को लंबे टेक्स्ट के साथ देखें। jsfiddle.net/6sWfw

— टॉमा टिन्तेरा

Answer 25

आप सीएसएस का उपयोग कर सकते हैं flexbox।

.testimonialText {
  height: 500px;
  padding: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #b4d2d2;
}

<div class="testimonialText">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Answer 26

सीएसएस ग्रिड का उपयोग करना मेरे लिए था:

.outer {
  background-color: grey;
  width: 10rem;
  height: 10rem;
  display: grid;
  justify-items: center;
}

.inner {
  background-color: red;
  align-self: center;
}

<div class='outer'>
  <div class='inner'>
    Content
  </div>
</div>

Answer 27

तालिका तत्व एम्बेड करने का प्रयास करें।

<div>
  <table style='width:200px; height:100px;'>
    <td style='vertical-align:middle;'>
      copenhagen
    </td>
  </table>
</div>

Comments

तालिकाएँ केवल सारणीबद्ध डेटा से निपटने के लिए हैं। लेआउट की समस्याओं को ठीक करने के लिए उनका उपयोग कभी नहीं किया जाना चाहिए।

— Micros

तालिकाओं के बारे में अच्छी बात यह है कि क्या वे हमेशा सुसंगत हैं - सीएसएस की व्याख्या कई अलग-अलग तरीकों से की जाती है और केवल कुछ सरल करने के लिए नेस्टेड डीआईवी डालकर अतिरिक्त HTML (और भ्रम) जोड़ा जाता है। CSS अभी भी काफी त्रुटिपूर्ण है

— MC9000

हाँ, दुर्भाग्य से यह अब भी है एक ब्लॉक में खड़ी संरेखित (अज्ञात) पाठ के लिए केवल विश्वसनीय तरीका। सीएसएस देवता से इतनी नफरत क्यों करते हैं? (सभी ब्राउज़र इसे लगातार कर सकते हैं - लेकिन केवल तालिका कक्षों में)

— T4NK3R

Answer 28

डिव के केंद्र में सामग्री या छवि प्रदर्शित करने के लिए कई ट्रिक्स हैं । कुछ उत्तर वास्तव में अच्छे हैं और मैं इनसे भी पूरी तरह सहमत हूँ।

सीएसएस में पूर्ण क्षैतिज और ऊर्ध्वाधर केंद्र

http://www.css-jquery-design.com/2013/12/css-techniques-absolute-horizontal-and-vertical-centering-in-css/

उदाहरणों के साथ 10 से अधिक तकनीकें हैं । अब यह आपके ऊपर है कि आप किसे पसंद करते हैं।

कोई शक नहीं, display:table; display:table-Cellएक बेहतर चाल है।

कुछ अच्छी तरकीबें निम्नलिखित हैं:

ट्रिक 1 - उपयोग करके display:table; display:table-cell

एचटीएमएल

<div class="Center-Container is-Table">
  <div class="Table-Cell">
    <div class="Center-Block">
        CONTENT
    </div>
  </div>
</div>

सीएसएस कोड

.Center-Container.is-Table { display: table; }
.is-Table .Table-Cell {
  display: table-cell;
  vertical-align: middle;
}
.is-Table .Center-Block {
  width: 50%;
  margin: 0 auto;
}

ट्रिक 2 - उपयोग करके display:inline-block

एचटीएमएल

<div class="Center-Container is-Inline">
  <div class="Center-Block">
     CONTENT
  </div>
</div>

सीएसएस कोड

.Center-Container.is-Inline {
  text-align: center;
  overflow: auto;
}

.Center-Container.is-Inline:after,
.is-Inline .Center-Block {
  display: inline-block;
  vertical-align: middle;
}

.Center-Container.is-Inline:after {
  content: '';
  height: 100%;
  margin-left: -0.25em; /* To offset spacing. May vary by font */
}

.is-Inline .Center-Block {
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
  /* max-width: calc(100% - 0.25em) /* Only for Internet Explorer 9+ */
}

ट्रिक 3 - उपयोग करके position:relative;position:absolute

<div style="position: relative; background: #ddd; border: 1px solid #ddd; height: 250px;">
  <div style="width: 50%; height: 60%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #ccc; text-align: center;">
    <h4>ABSOLUTE CENTER, <br/>
WITHIN CONTAINER.</h4>
    <p>This box is absolutely centered, horizontally and vertically, within its container</p>
  </div>
</div>

Answer 29

सीएसएस:

.vertical {
   display: table-caption;
}

इस वर्ग को उस तत्व में जोड़ें जिसमें वे चीजें हैं जो आप लंबवत संरेखित करना चाहते हैं

Answer 30

यदि आपको उस min-heightसंपत्ति के साथ उपयोग करने की आवश्यकता है जिसे आपको इस CSS को जोड़ना चाहिए:

.outerContainer .innerContainer {
    height: 0;
    min-height: 100px;
}