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

Question

मेरे पास ( और ) के divलिए एक सेट है , और मेरे अंदर कुछ पाठ है।display:block90px heightwidth

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

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

कोई विचार?

Comments

आप text-align:center"ऊर्ध्वाधर भाग" नहीं करते हैं?

— १३:११

मुझे अंत में एक ऐसा हल मिला, जो सापेक्ष आकार और बिना किसी निश्चित ऊँचाई के काम करता है: stackoverflow.com/a/16195362/1301331

— सिरस

यह जानना बहुत महत्वपूर्ण है कि केंद्र / मध्य तत्व कैसे हैं। नीचे दिए गए दस्तावेज़ में बहुत स्पष्ट तस्वीर दी गई है। w3.org/Style/Examples/007/center.en.html

— shibualexis

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

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

किसी तत्व को क्षैतिज और लंबवत रूप

— टायलरएच

Answer 1

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

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

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

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

---

2020 के लिए अपडेट करें:

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

#container {
  display: flex;
  justify-content: center;
  align-items: center;
}

बच्चे के लिए एक निश्चित चौड़ाई निर्दिष्ट करने के लिए, जिसे "फ्लेक्स आइटम" कहा जाता है:

#content {
  flex: 0 0 120px;
}

उदाहरण: http://jsfiddle.net/2woqsef1/1/

सामग्री को सिकोड़ने-लपेटने के लिए, यह और भी सरल है: बस flex: ...फ्लेक्स आइटम से लाइन हटा दें , और यह स्वचालित रूप से हटना-लिपटे है।

उदाहरण: http://jsfiddle.net/2woqsef1/2/

ऊपर के उदाहरणों को एमएस एज और इंटरनेट एक्सप्लोरर 11 सहित प्रमुख ब्राउज़रों पर परीक्षण किया गया है।

एक तकनीकी नोट यदि आपको इसे अनुकूलित करने की आवश्यकता है: फ्लेक्स आइटम के अंदर, क्योंकि यह फ्लेक्स आइटम स्वयं एक फ्लेक्स कंटेनर नहीं है, सीएसएस का पुराना गैर-फ्लेक्सबॉक्स तरीका उम्मीद के मुताबिक काम करता है। हालांकि, यदि आप वर्तमान फ्लेक्स कंटेनर में एक अतिरिक्त फ्लेक्स आइटम जोड़ते हैं, तो दो फ्लेक्स आइटम क्षैतिज रूप से रखे जाएंगे। उन्हें खड़ी रखने के flex-direction: column;लिए, फ्लेक्स कंटेनर में जोड़ें । यह एक फ्लेक्स कंटेनर और उसके तत्काल बाल तत्वों के बीच काम करता है ।

केंद्र करने की एक वैकल्पिक विधि है: centerफ्लेक्स कंटेनर के लिए मुख्य और क्रॉस अक्ष पर वितरण के लिए निर्दिष्ट नहीं करके , बल्कि margin: autoसभी चार दिशाओं में अतिरिक्त जगह लेने के लिए फ्लेक्स आइटम पर निर्दिष्ट करें , और समान रूप से वितरित मार्जिन। फ्लेक्स आइटम को सभी दिशाओं में केंद्रित कर देगा। यह तब काम करता है, जब कई फ्लेक्स आइटम हों। इसके अलावा, यह तकनीक MS Edge पर काम करती है लेकिन इंटरनेट एक्सप्लोरर 11 पर नहीं।

---

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/

यदि Internet Explorer 10 के लिए समर्थन की आवश्यकता है, तो flexbox काम नहीं करेगा और ऊपर विधि और line-heightविधि काम करेगी। अन्यथा, Flexbox काम करेगा।

Comments

अब उसके लिए एक display: table-cellसंपत्ति है, FYI करें। इसका उपयोग करने से तत्व एक टेबल सेल की तरह व्यवहार करता है और अनुमति देता हैvertical-align: middle;

— Shauna

यदि आप font:इनका उपयोग कर रहे हैं , तो सुनिश्चित करें कि आपने इसे line-ऊँचाई से आगे रखा है ।

— user1135469

जब div में <br/> तत्व होते हैं, तो यह उद्देश्य के अनुसार काम नहीं कर सकता है।

— मार्टिन मेसर

क्या होगा अगर मेरी ऊंचाई% में है?

— कैंडलकोडर

इस दृष्टिकोण के साथ पाठ पाठ एक पंक्ति में होना चाहिए, अन्यथा आपके पास पहले से नीचे दूसरी पंक्ति 90px होगी।

— टॉमाज़ मूलार्क

Answer 2

2014 के अनुसार सामान्य तकनीकें:

---

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

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

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

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

---

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

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

  में समर्थित ब्राउज़रों , सेट displayकरने के लिए लक्षित तत्व की flexऔर उपयोग align-items: 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-cellऔर जोड़ने vertical-align: middle।

  क्षैतिज केंद्र के लिए, आप या तो text-align: centerपाठ और किसी भी अन्य inlineबच्चों के तत्वों को केंद्र में जोड़ सकते हैं। वैकल्पिक रूप से, आप 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%विस्थापन के साथ ऊपर से बिल्कुल तैनात :

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

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

  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 में से एक के साथ जाओ।

Comments

व्यापक उत्तर के लिए +1। व्यक्तिगत रूप से मैं पहली विधि पसंद करता हूं क्योंकि विधि 2 में कम समर्थन है और मैं table-cellजितना संभव हो उतना बचना चाहता हूं ।

— हैरी

2. फ्लेक्सबॉक्स विधि केवल एक है जो काम करती है। 1. विधि पूर्णता के कारण माता-पिता को सिकुड़ने के लिए बनाती है। और 3. विधि बस काम नहीं करती है। जबकि पूर्ण स्थिति थी।

— जानिस ग्रूजिस

फ्लेक्स ने आईपैड क्रोम ब्राउजर पर वर्टिकल सेंटिंग मल्टीलाइन टेक्स्ट के लिए काम किया।

— बॉब

फ्लेक्सबॉक्स विधि बहुत अच्छी है।

— रोरीकोहलर

जब स्क्रॉल करने योग्य हो, तो मेरे लिए दृष्टिकोण 1 विफल रहता है।

— विशाल गुलाटी

Answer 3

Flexbox / CSS का उपयोग करना:

<div class="box">
    <p>&#x0D05;</p>
</div>

सीएसएस:

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

क्विक टिप से लिया गया : केंद्र तत्वों को सरलतम तरीके से ऊर्ध्वाधर और क्षैतिज रूप से

Comments

सावधान: IE में काम नहीं करेगा। आपको जोड़ना होगा display: -ms-flexbox; -ms-flex-align: center; -ms-flex-pack: center।

— फ्लोरियन वेंडेलबोर्न

तत्वों के text-align:centerलिए जोड़ें inline-.. जैसे कि पाठ।

ध्यान दें कि अब Flexbox का IE 10 और 11 में कम से कम आंशिक समर्थन है, और कैनीयूज़ के अनुसार 97% उपयोगकर्ताओं के लिए काम करता है । मुझे नहीं लगता कि ब्राउज़र समर्थन अब इसके खिलाफ एक तर्क है।

— फेलिक्स गगनोन-ग्रेनियर

Answer 4

display: table-cell;उस div के लिए अपनी CSS सामग्री में लाइन जोड़ें ।

केवल टेबल कोशिकाएं ही समर्थन करती हैं vertical-align: middle;, लेकिन आप उस [टेबल-सेल] की परिभाषा दे सकते हैं ...

एक जीवंत उदाहरण यहाँ है: 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
}

Comments

positionनिरपेक्ष या निश्चित होने पर यह काम नहीं करता है। देखें: jsfiddle.net/tH2cc/1636

— एरन मेसन

Answer 5

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

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/

Comments

^ क्यों मानक महत्वपूर्ण हैं

— फ्लोरियन वेंडेलबोर्न

Answer 6

आप इसके लिए बहुत आसान कोड आज़मा सकते हैं:

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

.box{
  height: 90px;
  width: 90px;
  background: green;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="box">
  Lorem
</div>

कोडपेन लिंक: http://codepen.io/santoshkhalse/pen/xRmZwr

Comments

कई लाइनों पर पाठ के लिए भी काम करता है, +1!

— जीरो बेलेमैन

Answer 7

इस सीएसएस वर्ग को लक्षित <div> पर दें:

.centered {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: red; /* Not necessary just to see the result clearly */
}

<div class="centered">This text is centered horizontally and vertically</div>

Comments

आपके पास वास्तव में और सीएसएस ग्रिड भी है :) मैं इस पाठ्यक्रम की सिफारिश करता हूं ।

— अमीनू कानो

Answer 8

आप माता - पिता की flexसंपत्ति का उपयोग कर सकते हैं और बच्चों की वस्तुओं में संपत्ति जोड़ सकते हैं: divmargin:auto

.parent {
    display: flex;
    /* You can change this to `row` if you want the items side by side instead of stacked */
    flex-direction: column;
}

/* Change the `p` tag to what your items child items are */
.parent p {
    margin: auto;
}

आप flexयहाँ और अधिक विकल्प देख सकते हैं : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 9

दृष्टिकोण १

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

Answer 10

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

Answer 11

# 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
}

Comments

यह पोस्ट किए गए अन्य उत्तरों से बिल्कुल अलग कैसे है?

— जोश क्रॉजियर

Answer 12

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}

<div>
  Hello, World!!
</div>

Comments

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

— सुधेश सिंगनमल्ला

Answer 13

.cell-row {display: table; width: 100%; height: 100px; background-color: lightgrey; text-align: center}
.cell {display: table-cell}
.cell-middle {vertical-align: middle}

<div class="cell-row">
  <div class="cell cell-middle">Center</div>
</div>

Answer 14

यह मेरे लिए काम करता है (ठीक परीक्षण!):

HTML:

<div class="mydiv">
    <p>Item to be centered!</p>
</div>

सीएसएस:

.mydiv {
    height: 100%; /* Or other */
    position: relative;
}

.mydiv p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%); /* To compensate own width and height */
}

आप 50% से अन्य मान चुन सकते हैं। उदाहरण के लिए, 25% अभिभावक 25% केंद्र में।

Answer 15

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

Comments

दो जवाब क्यों?

— पीटर मोर्टेंसन

Answer 16

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

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

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

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

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

   छवि

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

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

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

   छवि

   कोड की ये 3 पंक्तियाँ कंटेंट को एक डिवीज़न (डिस्प्ले के आकार के बावजूद) के बीच में सेट करती हैं। "संरेखित आइटम: center" खड़ी केंद्रित करने में मदद करता है, जबकि "संरेखित-सामग्री: center" कर देगा यह क्षैतिज रूप से केंद्रित।

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

Comments

विकल्प 2 ने मेरे लिए अच्छा काम किया। धन्यवाद!

— एनाक्रॉन 9'19

Answer 17

ग्रिड

.center {
    display: grid;
    justify-items: center;
    align-items: center;
}

.center {
    display: grid;
    justify-items: center;
    align-items: center;
}

.box {
    width: 200px;
    height: 100px;
    background: red;
}

<div class="box center">My text</div>

Answer 18

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

line-height: 90px;

Comments

नीचे नहीं जा रहा है क्योंकि यह एक समाधान हो सकता है, लेकिन यह केवल तभी काम करता है जब आप एकल-पंक्ति पाठ की गारंटी दे सकते हैं ...

— dooleyo

Answer 19

यह सही उत्तर होना चाहिए। सबसे साफ और सरल:

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

Answer 20

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

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

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

Answer 21

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

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

Answer 22

मेरे लिए यह सबसे अच्छा समाधान था:

HTML:

 <div id="outer">  
     <img src="logo.png">
 </div>

सीएसएस:

#outer {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

Answer 23

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <div style ="text-align: center;">Center horizontal text</div>
        <div style ="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);">Center vertical text</div>
    </body>
</html> 

Comments

यह अच्छा साफ कोड है। हालाँकि, आप अपने div टैग में ID जोड़ सकते हैं, ताकि बाद में यदि आवश्यक हो तो आप उनका उपयोग कर सकें।

— अमीर मदिर अमीरुज्जमां

आपका सुझाव देने के लिए धन्यवाद। हां, मैं मानता हूं कि आईडी हेरफेर करने में मददगार है।

क्या आपने पिछले उत्तर पढ़े हैं? क्या आप बता सकते हैं कि यह उत्तर पिछले वाले को क्या जोड़ता है?

— तैमनी अफिफ

@AmirMdAmiruzzaman क्या आप हमें बता सकते हैं कि इस कोड का सबसे साफ हिस्सा क्या है :) ... मैं इनलाइन शैलियों को देखता हूं जो अच्छा नहीं है ... आईडी जोड़ना भी एक अच्छा विचार नहीं है, हमें कक्षाओं की आवश्यकता है

— तैमनी अफिफ

जोश के उत्तर के दृष्टिकोण 1 का दोहराव

— मुनीम मुन्ना

Answer 24

वास्तव में सरल कोड जो मेरे लिए काम करता है! बस एक पंक्ति और आपका पाठ क्षैतिज रूप से केंद्रित होगा।

.center-horizontally{
  justify-content: center;
}

<Card.Footer className="card-body-padding center-horizontally">
  <label className="support-expand-text-light">Call or email Customer Support to change</label>
</Card.Footer>

आउटपुट इस तरह दिखता है:

कृपया इस जवाब को वोट करें यदि यह आसान समाधानों की तलाश में देवों के कुछ समय को खाली करने के लिए काम करता है। धन्यवाद! :)

Answer 25

निम्न उदाहरण का प्रयास करें। मैंने प्रत्येक श्रेणी के लिए उदाहरण जोड़े हैं: क्षैतिज और ऊर्ध्वाधर

<!DOCTYPE html>
<html>
    <head>
        <style>
            #horizontal
            {
                text-align: center;
            }
            #vertical
            {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
            }
         </style>
    </head>
    <body>
         <div id ="horizontal">Center horizontal text</div>
         <div id ="vertical">Center vertical text</div>
    </body>
</html> 

Comments

सवाल क्षैतिज और ऊर्ध्वाधर रूप से केंद्रित करने के बारे में है यह समाधान पहले से ही प्रदान किया गया है

— तैमनी आफ़्फ