सवाल मैं सीएसएस के साथ लंबवत पाठ कैसे केंद्रित करूं?


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

मेरी div शैली यहाँ है:

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}
<div id="box">
  Lorem ipsum dolor sit
</div>

इसे करने का बेहतरीन तरीका क्या है?


1811
2018-01-14 21:25


मूल


के संभावित डुप्लिकेट मैं सीएसएस के साथ लंबवत पाठ कैसे केंद्रित करूं? - leonbloy
के संभावित डुप्लिकेट लंबवत और क्षैतिज पृष्ठ पर <div> को केन्द्रित करने का सबसे अच्छा तरीका? - Dan Dascalescu
डब्ल्यू 3 सी संदर्भ: w3.org/Style/Examples/007/center.en.html - nu everest
आधुनिक तरीका: उपयोग करें फ्लेक्स - Mistalis
इस पृष्ठ पर कोड स्निपेट आपके लिए काम करेंगे: codepuran.com/web-designing/... - Akshay Pethani


जवाब:


आप इस मूल दृष्टिकोण को आजमा सकते हैं:

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}
<div>
  Hello World!
</div>

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


एक अधिक बहुमुखी दृष्टिकोण

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

div {
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>

सीएसएस बस आकार <div>, लंबवत केंद्र संरेखित करता है <span> सेट करके <div>इसकी ऊंचाई के बराबर रेखा-ऊंचाई, और बनाता है <span> एक इनलाइन-ब्लॉक के साथ vertical-align: middle। फिर यह लाइन-ऊंचाई को सामान्य के लिए सामान्य पर सेट करता है <span>, इसलिए इसकी सामग्री ब्लॉक के अंदर स्वाभाविक रूप से बहती है।


तालिका प्रदर्शन सिमुलेटिंग

और यहां एक और विकल्प है, जो पुराने पर काम नहीं कर सकता है ब्राउज़र जो समर्थन नहीं करते हैं display: table तथा display: table-cell (मूल रूप से सिर्फ इंटरनेट एक्सप्लोरर 7)। सीएसएस का उपयोग करके हम टेबल व्यवहार अनुकरण करते हैं (चूंकि तालिकाओं लंबवत संरेखण का समर्थन करते हैं), और HTML दूसरे उदाहरण के समान है:

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>


पूर्ण स्थिति का उपयोग करना

यह तकनीक शीर्ष, नीचे, बाएं और दाएं 0 पर एक बिल्कुल स्थित तत्व तत्व सेटिंग का उपयोग करती है। इसे स्मैशिंग मैगज़ीन में एक लेख में अधिक विस्तार से वर्णित किया गया है, सीएसएस में पूर्ण क्षैतिज और लंबवत केंद्र


2452
2018-03-06 08:15



क्योंकि अगर div या text में परिवर्तन होता है या अधिक सामग्री जोड़ दी जाती है तो यह गलत हो जाता है। - Rob
लेकिन यही वह है जो उसने कहा, यदि आप जानते हैं कि आप कितना पाठ पूरी तरह से स्वीकार्य उपयोग करेंगे ... नीचे दिया गया समाधान हालांकि अधिक लचीला है - acSlater
केवल तीसरा दृष्टिकोण मेरे फ़ायरफ़ॉक्स 22.0 पर अच्छा काम करता है, हालांकि यह सभी ब्राउज़रों के लिए काम नहीं करता है। एक बार जब मैं div के लिए ऊंचाई आकार बदलता हूं तो पहले 2 दृष्टिकोण ठीक से काम करना बंद कर देते हैं - YMC
मैं div के ऊंचाई के साथ एक ही लक्ष्य कैसे प्राप्त कर सकता हूं: "ऊंचाई: 100%;" ? - Fedor
table-cell तकनीक बहुत अच्छी है, लेकिन फिर सामग्री को मूल कंटेनर फिट करने के लिए आकार बदल दिया जाता है। छद्म-तत्व का उपयोग करके, सीएसएस ट्रिक्स से एक अद्भुत तकनीक यहां दी गई है before: css-tricks.com/centering-in-the-unknown । इस तरह की सामग्री का आकार बदल नहीं है, लेकिन यह केवल IE8 + में काम करता है। - Ian Campbell


एक और तरीका (अभी तक उल्लेख नहीं किया गया) के साथ है flexbox

बस निम्नलिखित कोड जोड़ें पात्र तत्व:

display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */

फ्लेक्सबॉक्स डेमो 1

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */
}
<div class="box">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
</div>

वैकल्पिक रूप से, सामग्री के माध्यम से संरेखित करने के बजाय पात्र, flexbox भी एक केंद्र केंद्रित कर सकते हैं फ्लेक्स आइटम एक साथ ऑटो मार्जिन  जब फ्लेक्स कंटेनर में केवल एक फ्लेक्स-आइटम होता है (ऊपर दिए गए प्रश्न में दिए गए उदाहरण की तरह)।

तो फ्लेक्स आइटम को क्षैतिज और लंबवत दोनों को केंद्रित करने के लिए बस इसे सेट करें margin:auto

फ्लेक्सबॉक्स डेमो 2

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
}
.box span {
  margin: auto;
}
<div class="box">
  <span>margin:auto on a flex item centers it both horizontally and vertically</span> 
</div>

ध्यान दें: उपर्युक्त सभी उन्हें बाहर रखकर आइटम केंद्रित करने पर लागू होते हैं क्षैतिज पंक्तियां। यह डिफ़ॉल्ट व्यवहार भी है, क्योंकि डिफ़ॉल्ट रूप से मान के लिए flex-direction है row। यदि, हालांकि फ्लेक्स-आइटमों को बाहर रखने की आवश्यकता है लंबवत कॉलम, फिर flex-direction: column मेन-अक्ष को कॉलम के रूप में सेट करने के लिए कंटेनर पर सेट किया जाना चाहिए और इसके अतिरिक्त justify-content तथा align-items गुण अब काम करते हैं दूसरी तरह के आसपास साथ में justify-content: center लंबवत केंद्रित और align-items: center क्षैतिज केंद्रित)

flex-direction: column डेमो

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 18px;
  font-style: oblique;
  color: #FFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* vertically aligns items */
  align-items: center;
  /* horizontally aligns items */
}
p {
  margin: 5px;
  }
<div class="box">
  <p>
    When flex-direction is column...
  </p>
  <p>
    "justify-content: center" - vertically aligns
  </p>
  <p>
    "align-items: center" - horizontally aligns
  </p>
</div>

फ्लेक्सबॉक्स से इसकी कुछ विशेषताओं को देखने और अधिकतम ब्राउज़र समर्थन के लिए वाक्यविन्यास प्राप्त करने के लिए एक अच्छी जगह है flexyboxes 

साथ ही, ब्राउज़र समर्थन आजकल बहुत अच्छा है: क्या में उपयोग कर सकता हूँ

क्रॉस-ब्राउज़र संगतता के लिए display: flex तथा align-items, आप निम्न का उपयोग कर सकते हैं:

display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

960
2018-01-14 21:29



फ्लेक्सबॉक्स समर्थन तालिका - user
+1 यह अच्छी तरह से काम करता है जब divs स्क्रीन की पूरी चौड़ाई लेता है - Andrew Bringaze
यह मेरे लिए भी अच्छा काम करता है, बाकी का उपरोक्त मेरी साइट पर काम नहीं कर रहा है। लेकिन दृश्य स्टूडियो पहचान नहीं है display: flex। - Antonio Ooi
आईई = हम कभी अच्छी चीजें नहीं कर सकते हैं - Andrew Hoffman
यह बॉम्बे है !!!! यह क्रोम और एंड्रॉइड क्रोम ब्राउज़र में एक मालिक की तरह काम करता है। - Frank


आप सीएसएस कोड के निम्न टुकड़े को जोड़कर आसानी से ऐसा कर सकते हैं:

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

इसका मतलब है कि आपका सीएसएस अंततः इस तरह दिखता है:

#box {
  height: 90px;
  width: 270px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  margin-left: 5px;
  display: table-cell;
  vertical-align: middle;
}
<div id="box">
  Some text
</div>


110
2017-10-25 18:12



ऐसा लगता है कि मार्जिन विशेषताओं को मारता है, हालांकि। - Tim
ध्यान दें कि यह समाधान IE7 का समर्थन नहीं करता है - mrtsherman
@ mrtsherman या बल्कि, आईई 7 इस समाधान का समर्थन नहीं करता है। ;-) - James McLaughlin
@ कोस्टा - यदि आप इस div के अंदर कुछ तैर रहे हैं तो आपको पैरेंट div भी तैरना पड़ सकता है ... चेक आउट stackoverflow.com/questions/2062258/... - Ian Campbell
यह अक्षम करता है min-heigth। - Penguin


संदर्भ के लिए और एक सरल उत्तर जोड़ने के लिए:

शुद्ध सीएसएस:

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

या एक एसएएसएस / एससीएसएस मिक्सिन के रूप में:

@mixin vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

द्वारा उपयोग:

.class-to-center {
    @include vertical-align;
}

सेबेस्टियन एकस्ट्रॉम के ब्लॉग पोस्ट द्वारा लंबवत सीएसएस की केवल 3 लाइनों के साथ कुछ भी संरेखित करें:

तत्व "अर्ध पिक्सेल" पर रखे तत्व के कारण तत्वों को धुंधला हो सकता है। इसके लिए एक समाधान अपने मूल तत्व को संरक्षित करने के लिए सेट करना है-3 डी। निम्नलिखित की तरह:

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

हम 2015+ में रहते हैं और फ्लेक्स बॉक्स हर प्रमुख आधुनिक ब्राउज़र द्वारा समर्थित है।

यह वेबसाइटों से बाहर निकलने का तरीका होगा।

यह जानें!


97
2017-08-11 11:59



शुद्ध सीएसएस: मेरे लिए चाल थी, लेकिन मुझे किसी भी तरह का उपयोग करना पड़ा absolute स्थिति .. - d4Rk
मुझे @ d4Rk के समान समस्या थी। मेरे (ब्लॉक) कंटेनर में रिश्तेदार स्थिति और ऊंचाई थी, और लंबवत केंद्र (छवि) की आवश्यकता वाले आइटम को पूरी तरह से तैनात किया जाना था। क्या जटिल / सरल समस्या है !! यहां उम्मीद है कि सीएसएस के अगले संस्करण में एक सरल / सरल फिक्स है। - Vanessa King


सभी क्रेडिट इस लिंक मालिक @ सेबेस्टियन एकस्ट्रॉम पर जाते हैं संपर्क; कृपया इस के माध्यम से जाओ। इसे क्रिया में देखें codepen। उपरोक्त लेख को पढ़कर मैंने भी बनाया एक डेमो पहेली

सीएसएस की केवल तीन पंक्तियों (विक्रेता उपसर्ग को छोड़कर) हम इसे एक परिवर्तन की सहायता से कर सकते हैं: अनुवाद जो लंबवत रूप से केंद्र चाहता है, भले ही हम इसकी ऊंचाई नहीं जानते हैं।

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

तो, ऐसा करने के लिए हम लिखते हैं:

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

आपको बस इतना ही चाहिए यह पूर्ण-स्थिति विधि के लिए एक समान तकनीक है, लेकिन उल्टा के साथ हमें मूल तत्व या स्थिति-संपत्ति पर किसी भी ऊंचाई को सेट करने की आवश्यकता नहीं है। यह सीधे बॉक्स में भी काम करता है इंटरनेट एक्सप्लोरर 9!

इसे और भी सरल बनाने के लिए, हम इसे अपने विक्रेता उपसर्गों के साथ एक मिश्रण के रूप में लिख सकते हैं।


49
2017-12-13 20:09



मैंने न्यूनतम परीक्षण किया है, लेकिन मेरे लिए काम करना प्रतीत होता है! - Iain Collins
फ़ॉन्ट आकार को बदलकर यह पूरे स्थान पर चलता है - Jon49


CSS3 में पेश किए गए फ्लेक्सबॉक्स समाधान हैं:

section {
    display: flex;
    display: -webkit-flex;
    height: 200px;
    width: 50%;
    margin: auto;
    border-radius: 20px;
    border: 5px solid black;
    background-color: yellow;
}

p {
    text-align: center;
    margin: auto; /* Important */
    font-family: Calibri;
}
<section>
    <p>
        I'm center!<br/>
        Flexboxes are great!
    </p>
</section>

ध्यान दें: यदि आप टेक्स्ट को केंद्र बनाना चाहते हैं, तो ऊपर दी गई रेखा को इन पंक्तियों में से किसी एक के साथ महत्वपूर्ण के रूप में चिह्नित करें:

1) केवल लंबवत:

margin: auto 0;

2) केवल क्षैतिज:

margin: 0 auto;

अद्यतन करें: जैसा कि मैंने देखा, यह चाल ग्रिड (डिस्प्ले: ग्रिड) के साथ भी काम करती है।


22
2017-08-28 10:11



क्या आप कृपया व्याख्या कर सकते हैं कि पैराग्राफ को केंद्रित करने पर इस मामले में फ्लेक्स का प्रभाव क्यों है? - elena
@ एलेना वास्तव में, मुझे नहीं पता कि क्यों, मैंने कोशिश की जब मैं कोशिश कर रहा था। हालांकि, यह सीएसएस के नए संस्करणों के लिए एक विचार होगा। उदाहरण के लिए, यदि आप इस मामले में डिस्प्ले को ग्रिड में बदलते हैं, तो इसे फ्लेक्सबॉक्स के समान ही काम किया जाएगा। मुझे लगता है कि सीएसएस के पिछले दोषों की भरपाई करने के लिए ग्रिड और फ्लेक्सबॉक्स नई सुविधाओं के साथ आता है; और यह चाल उनमें से एक है। - MAChitgarha


लचीला दृष्टिकोण

div {
  width: 250px;
  min-height: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid #123456;
  margin-bottom:5px;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
  <span>Lorem ipsum dolor sit amet.</span>
</div>
<div>


13
2018-06-29 09:26





उत्तर के रूप में स्वीकार किया गया समाधान उपयोग करने के लिए सही है line-height div की ऊंचाई के समान, लेकिन पाठ हल होने पर यह समाधान पूरी तरह से काम नहीं करता है या दो पंक्तियों में है।

पाठ को लपेटकर या div के अंदर कई पंक्तियों पर है, तो इसे आज़माएं।

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

अधिक संदर्भ के लिए, देखें:


13
2018-04-15 08:28





आप नीचे गुणों का भी उपयोग कर सकते हैं।

display: flex; 
align-content: center; 
justify-content : center;

9
2017-12-01 18:06



धन्यवाद 'सत्विक बोर्गुला', मुझे आपकी कोड की समस्या नहीं है, शायद मेरे कोड में कुछ संघर्ष हो। मैं इस कोड के साथ परीक्षण करता हूं: <div id = "topper" class = "कंटेनर"> <span> आपकी सामग्री! </ Span> </ div> लेकिन यह उपरोक्त वर्णित 'michielvoo' के रूप में उपयोग कोड द्वारा तय किया जा सकता है। - Masa S-AiYa


प्रयत्न यह समाधान:

.EXTENDER {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
}

.PADDER-CENTER {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
<div class="EXTENDER">
  <div class="PADDER-CENTER">
    <div contentEditable="true">Edit this text...</div>
  </div>
</div>

का उपयोग कर बनाया गया सीएसएस +


9
2018-05-28 07:41





आप संदर्भ के रूप में निम्न कोड स्निपेट का उपयोग कर सकते हैं। यह मेरे लिए एक आकर्षण की तरह काम कर रहा है:

<!DOCTYPE html>
    <html lang="de">
        <head>
            <title>Vertically Center Text</title>
            <style>
                html, body {
                    height: 100%;
                    margin: 0;
                    padding: 0;
                    width: 100%;
                }
                body {
                    display: table;
                }
                .centered-text {
                    text-align: center;
                    display: table-cell;
                    vertical-align: middle;
                }
            </style>
        </head>

        <body style="background:#3cedd5">
            <div class="centered-text">
                <h1>Yes, it's my landing page</h1>
                <h2>Under construction, coming soon!!!</h2>
            </div>
        </body>
    </html>

उपरोक्त कोड स्निपेट का आउटपुट निम्नानुसार है:

Enter image description here

स्रोत कोड क्रेडिट: मैं सीएसएस के साथ लंबवत पाठ कैसे केंद्रित करूं? कोड पुराण


8
2017-09-28 18:07