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




css vertical-alignment (20)

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;

मेरे पास एक 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>

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


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

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

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

और यहां एक और विकल्प है, जो पुराने ब्राउज़र पर काम नहीं कर सकता है जो display: table समर्थन नहीं करते 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 पर एक बिल्कुल स्थित तत्व तत्व सेटिंग का उपयोग करती है। इसे स्मैशिंग मैगज़ीन, पूर्ण क्षैतिज और वर्टिकल सेंटरिंग में सीएसएस में एक लेख में अधिक विस्तार से वर्णित किया गया है।


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

<!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>

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

स्रोत कोड क्रेडिट: codepuran.com/web-designing/… codepuran.com/web-designing/…


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

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>


एक और तरीका (अभी तक उल्लेख नहीं किया गया है) 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>

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

तो फ्लेक्स आइटम को क्षैतिज और लंबवत दोनों को केंद्रित करने के लिए बस margin:auto साथ सेट करें 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 मुख्य-अक्ष को कॉलम के रूप में सेट करने के लिए कंटेनर पर flex-direction: column सेट किया जाना चाहिए और इसके अतिरिक्त justify-content और align-items गुण अब दूसरे काम करते हैं justify-content: center साथ चारों ओर रास्ता justify-content: center लंबवत और align-items: center केंद्रित align-items: 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

साथ ही, ब्राउज़र समर्थन आजकल बहुत अच्छा है: caniuse

प्रदर्शन के लिए क्रॉस-ब्राउज़र संगतता के लिए 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;

एक बेहतर, आसान, उत्तरदायी दृष्टिकोण सीएसएस में margin-top को लगभग 45% पर सेट करना है:

margin-top: 45%;

आपको उस नंबर के साथ खेलना पड़ सकता है, लेकिन यह आसपास के div के केंद्र में होगा।


जहां भी आप लंबवत केंद्र शैली चाहते हैं, इसका मतलब है कि आप display:table-cell करने का प्रयास कर सकते display:table-cell और vertical-align:middle

उदाहरण:

#box
{
  display: table-cell;
  vertical-align: middle;
  height: 90px;
  width: 270px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  margin-left: 5px;
}
<div Id="box">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>


दूसरा रास्ता:

div की height विशेषता सेट न करें, लेकिन इसके बजाय padding: उपयोग करें padding: प्रभाव प्राप्त करने के लिए। इसी प्रकार लाइन-ऊंचाई तक, यह केवल तभी काम करता है जब आपके पास टेक्स्ट की एक पंक्ति हो। हालांकि इस तरह, यदि आपके पास अधिक सामग्री है, तो टेक्स्ट अभी भी केंद्रित होगा, लेकिन div स्वयं थोड़ा बड़ा होगा।

तो इसके साथ जाने के बजाय:

div {
  height:120px;
  line-height: 120px;
}

तुम कह सकते हो:

div {
   padding: 60px 0; //Maybe 60 minus font-size divided by two, if you want to be  exact
}

यह div के शीर्ष और निचले padding को 60px सेट करेगा, और बाएं और दाएं padding शून्य पर होगा, जिससे div 120px (प्लस आपकी फ़ॉन्ट की ऊंचाई) उच्च हो जाएगी, और पाठ को लंबवत रूप से div में केंद्रित किया जाएगा।


निम्न कोड स्क्रीन आकार या div आकार के बावजूद स्क्रीन के बीच में div डाल देगा:

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}
 <html>
 <head>
 </head>
 <body>
 <div class="center-screen">
 I'm in the center
 </div>
 </body>
 </html>

here flex बारे में अधिक जानकारी देखें।


निम्नलिखित कोड आज़माएं:

प्रदर्शन: टेबल-सेल; लंबवत-संरेखण: मध्य;

div {
  height: 80%;
  width: 100%;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  background: #4CAF50;
  color: #fff;
  font-size: 50px;
  font-style: italic;
}
<div>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
</div>


पाठ की एक पंक्ति (या एक वर्ण) के लिए आप इस तकनीक का उपयोग कर सकते हैं:

इसका उपयोग तब किया जा सकता है जब #box में गैर-निश्चित, सापेक्ष ऊंचाई% में हो

<div id="box"></div>

#box::before {
    display: block;
    content: "";
    height: 50%;
}

#box::after {
    vertical-align: top;
    line-height: 0;
    content: "TextContent";
}

JsBin (सीएसएस को संपादित करने में आसान) या JsFiddle (परिणाम फ्रेम की ऊंचाई बदलने के लिए आसान) पर लाइव डेमो देखें।

यदि आप HTML में आंतरिक टेक्स्ट रखना चाहते हैं, तो सीएसएस में नहीं, तो आपको अतिरिक्त इनलाइन तत्व में टेक्स्ट सामग्री को लपेटना होगा और इसे मिलान करने के #box::after संपादित #box::after होगा। (और, ज़ाहिर है, content: संपत्ति को हटाया जाना चाहिए।)
उदाहरण के लिए,
<div id="box"><span>TextContent</span></div>
इस मामले में #box::after #box span बदला जाना चाहिए।

IE8 समर्थन के लिए आपको :: with : को प्रतिस्थापित करना होगा।


मुझे क्लिक करने योग्य हाथियों की एक पंक्ति की आवश्यकता थी, लंबवत केंद्रित, लेकिन कुछ इंटरनेट एक्सप्लोरर 9 अजीबता के आसपास एक टेबल का उपयोग किए बिना।

अंततः मुझे सबसे अच्छे सीएसएस (मेरी ज़रूरतों के लिए) मिला और फ़ायरफ़ॉक्स, क्रोम और इंटरनेट एक्सप्लोरर 11 के साथ यह बहुत अच्छा है। अफसोस की बात है कि इंटरनेट एक्सप्लोरर 9 अभी भी मुझ पर हंस रहा है ...

div {
  border: 1px dotted blue;
  display: inline;
  line-height: 100px;
  height: 100px;
}

span {
  border: 1px solid red;
  display: inline-block;
  line-height: normal;
  vertical-align: middle;
}

.out {
  border: 3px solid silver;
  display: inline-block;
}
<div class="out" onclick="alert(1)">
  <div> <span><img src="http://www.birdfolk.co.uk/littleredsolo.png"/></span> </div>
  <div> <span>A lovely clickable option.</span> </div>
</div>

<div class="out" onclick="alert(2)">
  <div> <span><img src="http://www.birdfolk.co.uk/bang2/Ship01.png"/></span> </div>
  <div> <span>Something charming to click on.</span> </div>
</div>

जाहिर है आपको सीमाओं की आवश्यकता नहीं है, लेकिन वे यह देखने में आपकी सहायता कर सकते हैं कि यह कैसे काम करता है।


मैंने पिछले उत्तरों को देखा, वे केवल उस चौड़ाई के लिए काम करेंगे (उत्तरदायी नहीं)। उत्तरदायी के लिए आपको फ्लेक्स का उपयोग करना होगा,

उदाहरण

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

यदि आप अपने छोटे दृष्टि से 3 डी प्रभाव की परवाह नहीं करते हैं तो इसे div बजाय button भीतर सेट करें।

#box
{
  height: 120px;
  width: 300px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
}
<button Id="box" disabled>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</button>


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

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

.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+ में रहते हैं और फ्लेक्स बॉक्स को हर प्रमुख आधुनिक ब्राउज़र द्वारा समर्थित किया जाता है।

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

यह जानें!


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

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

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

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

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

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

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


इस समाधान का प्रयास करें :

.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>

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


आपके सभी लंबवत संरेखण आवश्यकताओं के लिए!

इस मिक्सिन घोषित करें:

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

फिर इसे अपने तत्व में शामिल करें:

.element{
    @include vertical-align();
}

.box {  
  width: 100%;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}

.height {
  line-height: 170px;
  height: 170px;
}

.transform { 
  height: 170px;
  position: relative;
}

.transform p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<h4>Using Height</h4>
<div class="box height">
  Lorem ipsum dolor sit
</div>

<hr />

<h4>Using Transform</h4>
<div class="box transform">
  <p>Lorem ipsum dolor sit</p>
</div>


<!DOCTYPE html>
<html>
  <head>
    <style>
      .main{
        height:450px;
        background:#f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        -webkit-box-align: center;
        align-items: center;
        justify-content: center;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <h1>Hello</h1>
    </div>
  </body>
</html>




vertical-alignment