html - एक div ब्लॉक के अंदर सीएसएस केंद्र पाठ(क्षैतिज और लंबवत)




css (14)

मेरे पास display:block करने के लिए एक div सेट है display:block । ( 90px height और width ) और मेरे अंदर कुछ पाठ है।

मुझे पाठ को लंबवत और क्षैतिज दोनों केंद्र में गठबंधन करने की आवश्यकता है।

मैंने text-align:center की कोशिश की है text-align:center , लेकिन यह क्षैतिज भाग नहीं करता है इसलिए मैंने vertical-align:middle की कोशिश की vertical-align:middle लेकिन यह काम नहीं किया।

कोई विचार?

2014 के रूप में आम तकनीकें:

  • दृष्टिकोण 1 - transform / translateY :

    यहां उदाहरण / पूर्ण स्क्रीन उदाहरण

    समर्थित ब्राउज़र (उनमें से अधिकतर) में, आप top: 50% उपयोग कर सकते हैं top: 50% / left: 50% translateX(-50%) translateY(-50%) साथ संयोजन में left: 50% गतिशील रूप से लंबवत / क्षैतिज रूप से तत्व को केंद्रित करते हैं। 

    .container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

  • दृष्टिकोण 2 - फ्लेक्सबॉक्स विधि:

    यहां उदाहरण / पूर्ण स्क्रीन उदाहरण

    समर्थित ब्राउज़र में , लक्षित तत्व का display flex सेट करें और align-items: center उपयोग align-items: center ऊर्ध्वाधर केंद्र और justify-content: center लिए justify-content: center क्षैतिज justify-content: center लिए justify-content: center । बस अतिरिक्त ब्राउज़र समर्थन के लिए विक्रेता उपसर्ग जोड़ने के लिए मत भूलना ( उदाहरण देखें )। 

    html, body, .container {
    height: 100%;
}
.container {
    display: flex;
    align-items: center;
    justify-content: center;
}

  • दृष्टिकोण 3 - table-cell / vertical-align: middle :

    यहां उदाहरण / पूर्ण स्क्रीन उदाहरण

    कुछ मामलों में, आपको यह सुनिश्चित करने की आवश्यकता होगी कि html / body एलिमेंट की ऊंचाई 100% सेट हो।

    लंबवत संरेखण के लिए, पैरेंट तत्व की width / height 100% और display: table जोड़ें display: table । फिर बच्चे के तत्व के लिए, table-cell में display बदलें और vertical-align: middle जोड़ें vertical-align: middle ।

    क्षैतिज केंद्र के लिए, आप या तो text-align: center जोड़ सकते हैं text-align: center टेक्स्ट को केंद्र और अन्य inline बच्चों के तत्वों को केंद्र में केंद्रित करने के लिए केंद्र। वैकल्पिक रूप से, आप margin: 0 auto उपयोग कर सकते हैं margin: 0 auto मानते हैं कि तत्व block स्तर है। 

    html, body {
    height: 100%;
}
.parent {
    width: 100%;
    height: 100%;
    display: table;
    text-align: center;
}
.parent > .child {
    display: table-cell;
    vertical-align: middle;
}

  • दृष्टिकोण 4 - विस्थापन के साथ शीर्ष से 50% बिल्कुल स्थित है:

    यहां उदाहरण / पूर्ण स्क्रीन उदाहरण

    यह दृष्टिकोण मानता है कि पाठ की एक ज्ञात ऊंचाई है - इस उदाहरण में, 18 18px । पैरेंट तत्व के सापेक्ष, शीर्ष से केवल 50% तत्व को स्थिति में रखें। इस मामले में -9px में तत्व की ज्ञात ऊंचाई का आधा हिस्सा नकारात्मक margin-top मान का उपयोग करें। 

    html, body, .container {
    height: 100%;
}
.container {
    position: relative;
    text-align: center;
}
.container > p {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -9px;
}

  • दृष्टिकोण 5 - line-height विधि (कम लचीला - सुझाया नहीं गया):

    यहां उदाहरण

    कुछ मामलों में, मूल तत्व की निश्चित ऊंचाई होगी। ऊर्ध्वाधर केंद्र के लिए, आपको केवल मूल तत्व की निश्चित ऊंचाई के बराबर बाल तत्व पर line-height मान सेट करना है।

    यद्यपि यह समाधान कुछ मामलों में काम करेगा, यह ध्यान देने योग्य है कि यह काम नहीं करेगा जब टेक्स्ट की कई पंक्तियां होंगी - जैसे । 

    .parent {
    height: 200px;
    width: 400px;
    text-align: center;
}
.parent > .child {
    line-height: 200px;
}

तरीके 4 और 5 सबसे विश्वसनीय नहीं हैं। पहले 3 में से एक के साथ जाओ।

दृष्टिकोण 1 

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

दृष्टिकोण 2 

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>

दृष्टिकोण 3 

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>

आप निम्न विधियों का प्रयास कर सकते हैं:

1. यदि आपके पास एक शब्द या एक पंक्ति वाक्य है, तो निम्न कोड चाल कर सकता है।

एक div टैग के अंदर एक पाठ है और इसे एक आईडी दें। उस आईडी के लिए निम्नलिखित गुणों को परिभाषित करें। 

id-name {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed red;
}

नोट: सुनिश्चित करें कि रेखा-ऊंचाई संपत्ति विभाजन की ऊंचाई के समान है।

Image

लेकिन, यदि सामग्री एक से अधिक शब्द या रेखा से अधिक है तो यह काम नहीं करती है। साथ ही, ऐसे समय होंगे जब आप पीएक्स या% में डिवीजन के आकार को निर्दिष्ट नहीं कर सकते हैं। (जब विभाजन वास्तव में छोटा होता है और आप सामग्री को बीच में बिल्कुल ठीक करना चाहते हैं)

2. इस समस्या को हल करने के लिए, हम गुणों के निम्नलिखित संयोजन को आजमा सकते हैं। 

id-name {
display: flex;
justify-content: center;
align-items: center;
border: 2px dashed red;
}

Image

कोड की ये 3 पंक्तियां सामग्री को डिवीजन के बीच में सेट करती हैं (प्रदर्शन के आकार के बावजूद)। "संरेखण-वस्तु: केंद्र" ऊर्ध्वाधर केंद्र में मदद करता है जबकि "औचित्य-सामग्री: केंद्र" क्षैतिज रूप से केंद्रित होगा।

नोट: फ्लेक्स सभी ब्राउज़रों में काम नहीं करता है। सुनिश्चित करें कि आप अतिरिक्त ब्राउज़र समर्थन के लिए उचित विक्रेता उपसर्ग जोड़ते हैं।

ऊर्ध्वाधर संरेखण प्राप्त करने के लिए लाइन ऊंचाई समायोजित करना। 

line-height: 90px;

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

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

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

-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;

इसे यहां कार्रवाई में देखें: https://jsfiddle.net/yp1gusn7/

यदि यह टेक्स्ट और / या छवि की एक पंक्ति है, तो यह करना आसान है। महज प्रयोग करें 

text-align: center;
vertical-align: middle;
line-height: 90px;       /* the same as your div height */

बस। यदि यह कई रेखाएं हो सकती है, तो यह कुछ और जटिल है। लेकिन http://pmob.co.uk/ पर "समाधान लंबवत" के लिए समाधान हैं।

चूंकि वे हैक होते हैं या जटिल divs जोड़ते हैं ... मैं आमतौर पर इसे करने के लिए एक सेल के साथ एक टेबल का उपयोग करता हूं ... इसे यथासंभव सरल बनाने के लिए।

2016/2017 के लिए अपडेट करें:

इसे transform साथ अधिक सामान्य रूप से किया जा सकता है, और यह पुराने ब्राउज़र जैसे आईई 10 और आईई 11 में भी अच्छा काम करता है। यह टेक्स्ट की कई पंक्तियों का समर्थन कर सकता है: 

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

उदाहरण: https://jsfiddle.net/wb8u02kL/1/

चौड़ाई लपेटने के लिए:

उपरोक्त समाधान सामग्री क्षेत्र के लिए एक निश्चित चौड़ाई का उपयोग किया। एक सिकुड़ लपेट चौड़ाई का उपयोग करने के लिए, उपयोग करें 

position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

उदाहरण: https://jsfiddle.net/wb8u02kL/2/

मैंने फ्लेक्सबॉक्स की कोशिश की, लेकिन यह व्यापक रूप से समर्थित नहीं था, क्योंकि यह आईई 10 जैसे आईई के कुछ पुराने संस्करण में टूट जाएगा।

यह मेरे लिए काम किया 

.center-stuff{  
      text-align: center;
      vertical-align: middle;
      line-height: 230px;/*This should be the div height*/
    }

यह सही जवाब होना चाहिए। सबसे साफ और सरल: 

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

लाइन display: table-cell; जोड़ें display: table-cell; उस div के लिए अपने सीएसएस के लिए। केवल तालिका कक्ष लंबवत-संरेखण का समर्थन करते हैं: मध्य; लेकिन आप div [table-cell] परिभाषा div को दे सकते हैं ..

यहां लाइव उदाहरण: http://jsfiddle.net/tH2cc/ 

div{
    height:90px;
    width:90px;
    text-align:center;
    border:1px solid silver;
    display: table-cell; // this says treat this element like a table cell
    vertical-align:middle; //now we can center vertically like in a TD
}

शैली लागू करें: 

position: absolute;
top: 50%;
left: 0;
right: 0;

आपका टेक्स्ट इसकी लंबाई के बावजूद केंद्रित होगा। 

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

#parent
{
  display:table;
}
#child
{
  display:table-cell;
  width:100%; //as large as its parent to center the text horizontally
  text-align: center;
  vertical-align:middle;//vertically align this element on its parent
}

<!DOCTYPE html>
<html>
  <head>
    <style>
      .maindiv{
        height:450px;
        background:#f8f8f8;
        display: -webkit-flex;
        align-items: center;
        justify-content: center;
      }
      p{
        font-size:24px;}
    </style>
  </head>
  <body>
    <div class="maindiv">
      <h1>Title</h1>

    </div>
  </body>
</html>

<div class="small-container">
    <span>Text centered</span>
</div>

<style>
.small-container {
    width:250px;
    height:250px;
    border:1px green solid;
    text-align:center;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.small-container span{
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
</style>





html   css  


css