html - मैं div में पाठ को लंबवत रूप से कैसे संरेखित करूं?




css vertical-alignment (17)

अद्यतन - यहां एक महान संसाधन है

http://howtocenterincss.com/

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

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

नवीनतम तकनीक के साथ इस पोस्ट को अद्यतित रखने के साथ इनलाइन, फ्लेक्सबॉक्स का उपयोग करके कुछ केंद्र बनाने का एक आसान तरीका यहां है। फ्लेक्सबॉक्स IE9 and lower में समर्थित नहीं है।

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

ब्राउज़र उपसर्ग के साथ jsfiddle

एचटीएमएल

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

सीएसएस

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

अद्यतन - एक और समाधान

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

यह विधि IE8 and lower में समर्थित नहीं है

jsfiddle

एचटीएमएल

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

सीएसएस

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

पिछला जवाब

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

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

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

संपादित करें: जैसा कि मैंने आखिरी परियोजना के लिए आईई 7/6 के लिए बहुत अधिक परवाह नहीं की थी, मैंने थोड़ा सा छीन लिया संस्करण (यानी उन चीज़ों को हटा दिया जो इसे आईई 7 और 6 में काम करते थे)। किसी और के लिए उपयोगी हो सकता है ...

jsfiddle

एचटीएमएल

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

और सीएसएस:

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

मैं एक 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>


Div के केंद्र में सामग्री / छवि प्रदर्शित करने के लिए कई ट्रिक्स हैं। कुछ जवाब वास्तव में अच्छे हैं और मैं भी इनके साथ पूरी तरह से सहमत हूं।

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

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

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

निस्संदेह, display:table; display:table-Cell display:table; display:table-Cell एक बेहतर चाल है।

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

चाल 1 - display:table; display:table-cell का उपयोग करके display:table; display:table-cell 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 का उपयोग करके 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 IE9+ */ 
}

ट्रिक 3 - position:relative;position:absolute का उपयोग करके 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>

आप फ्लेक्सबॉक्स का उपयोग कर div के अंदर लंबवत केंद्र टेक्स्ट को संरेखित कर सकते हैं।

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

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

आप इस लिंक पर इसके बारे में अधिक जान सकते हैं: https://css-tricks.com/snippets/css/a-guide-to-flexbox/


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

height: 309px;
line-height: 309px;

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

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


इस सरल समाधान की जांच करें:

एचटीएमएल

<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


एडम टॉमेट के जवाब के मुताबिक पाठ में पाठ को संरेखित करने के example एक jsfiddle example तैयार किया गया था

<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 */
}

blog में एक और example और कुछ स्पष्टीकरण के साथ।


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

एचटीएमएल

<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> (जो एक फ़ॉन्ट है)


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

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

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

एचटीएमएल

<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%);
}

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

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%);
}

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

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


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

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

.vcenter{
    background:#eee;
    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">
  <p>This is my Text<br />Text</p>
</div>
<div class="vcenter">
  <p>This is my Text<br />Text<br />Text</p>
</div>


   
   


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

.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%);    
}

स्रोत: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/


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

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

सीएसएस:

.vertical {
   display: table-caption;
}

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


display: flex साथ यह आसान है display: flex । सभी पाठ div लंबवत केंद्रित है:

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

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

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

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


एचटीएमएल

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

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




vertical-alignment