html - tutorial - types of css




एक div के अंदर एक div को लंबवत केंद्रित करना (16)

एक और तरीका ट्रांसफॉर्म अनुवाद का उपयोग कर रहा है

बाहरी div को अपनी position को relative या fixed सेट करनी चाहिए, और आंतरिक div को अपनी position को absolute , top और left से 50% सेट करना होगा और एक transform: translate(-50%, -50%) लागू करना होगा transform: translate(-50%, -50%)

div.cn {
    position: relative;
    width: 200px;
    height: 200px;
    background: gray;
    text-align: center;
}

div.inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    -webkit-transform: translate(-50%, -50%);  
    transform: translate(-50%, -50%);   
    background: red;
  
}
<div class="cn">
    <div class="inner">
        test
    </div>
</div>

में परीक्षण किया गया:

  • ओपेरा 24.0 (न्यूनतम 12.1)
  • सफारी 5.1.7 (न्यूनतम 4 -webkit- उपसर्ग के साथ)
  • फ़ायरफ़ॉक्स 31.0 (न्यूनतम 3.6--oz- prefix के साथ, बिना उपसर्ग के 16 से)
  • क्रोम 36 (न्यूनतम 11 के साथ -webkit- उपसर्ग, उपसर्ग के बिना 36 से)
  • आईई 11, 10 (न्यूनतम 9 के साथ- prefix, उपसर्ग के बिना 10 से)
  • अधिक ब्राउज़र, क्या मैं उपयोग कर सकता हूँ?

मैं एक div को केंद्र में रखना चाहता हूं जो किसी अन्य div के अंदर जोड़ा जाता है।

<div id="outerDiv">
    <div id="innerDiv">
    </div>
</div>

यह वह सीएसएस है जिसका मैं वर्तमान में उपयोग कर रहा हूं।

    #outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
    }

    #innerDiv{
        width: 284px;
        height: 290px;
        position:absolute;
        top: 50%;
        left:50%;
        margin-top: -147px;
        margin-left: -144px;
    }

जैसा कि आप देख सकते हैं, अब मैं जिस दृष्टिकोण का उपयोग करता हूं वह innerDiv की चौड़ाई और ऊंचाई के मानों पर निर्भर करता है। अगर चौड़ाई / ऊंचाई में परिवर्तन होता है, तो मुझे margin-top और margin-left मानों को संशोधित करना होगा। क्या कोई सामान्य समाधान है जिसे मैं कर सकता हूं इसके आकार के बावजूद innerDiv हमेशा innerDiv करने के लिए उपयोग करें?

मुझे पता चला कि margin:auto का उपयोग करके margin:auto क्षैतिज रूप से बीच में आंतरिक डीआईवी को आवंटित कर सकता है। लेकिन लंबवत आवंटित मध्य के बारे में क्या?


अन्य div के अंदर div वस्तुओं को लंबवत रूप से केंद्रित करना

बस कंटेनर को display:table करने के लिए सेट करें display:table और फिर आंतरिक आइटम display:table-cell करने के display:table-cell । कंटेनर पर height सेट करें, और फिर vertical-align:middle सेट vertical-align:middle आंतरिक वस्तुओं पर vertical-align:middle । आईई 9 के दिनों तक इसकी व्यापक संगतता वापस आ गई है।

बस ध्यान दें कि लंबवत संरेखण माता-पिता कंटेनर की ऊंचाई पर निर्भर करेगा।

.cn
{
display:table;
height:80px;
background-color:#555;
}

.inner
{
display:table-cell;
vertical-align:middle;
color:#FFF;
padding-left:10px;
padding-right:10px;
}
<div class="cn">
  <div class="inner">Item 1</div>
  <div class="inner">Item 2</div>
</div>


आंतरिकडिव के लिए जो इसकी ऊंचाई मान निर्दिष्ट नहीं करता है, इसे लंबवत केंद्रित करने के लिए कोई शुद्ध सीएसएस समाधान नहीं है। जावास्क्रिप्ट समाधान को आंतरिकडिव ऑफसेट प्राप्त किया जा सकता है, फिर शैली की गणना करें। marginTop।


आप इसे एक साधारण जावास्क्रिप्ट (jQuery) ब्लॉक के साथ कर सकते हैं।

सीएसएस :

#outerDiv{
    height:100%;
}

जावास्क्रिप्ट :

<script type="text/javascript">
    $(document).ready(function () {
        $("#innerDiv").css('top', ($(window).height() - $("#content").height()) / 2);
    });
</script>

इस क्षैतिज और ऊर्ध्वाधर केंद्र को प्राप्त करने का एक और तरीका यह है:

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

( Reference )


इस तरह के आंतरिक तत्व को संरेखित करने का प्रयास करें:

top: 0;
bottom: 0;
margin: auto;
display: table;

और निश्चित रूप से:

position: absolute;

पहेली लिंक < http://jsfiddle.net/dGHFV/2515/ >

इसे इस्तेमाल करे

   #outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
        border:1px solid red;
    }

    #innerDiv{
        width: 284px;
        height: 290px;
        position:absolute;
        top: 0px;
        left:0px;
        right:0px;
        bottom:0px;
        margin:auto;
        border:1px solid green;
    }

मुझे पता है कि सवाल साल पहले बनाया गया था ... वैसे भी धन्यवाद CSS3 आप div में div को आसानी से लंबवत रूप से संरेखित कर सकते हैं (उदाहरण के लिए http://jsfiddle.net/mcSfe/98/ )

<div style="width: 100px; height: 100px">
<div>
Go to Hell!
</div>
</div>

div
{
display:-moz-box;
-moz-box-align:center;
} 

मैं बाहरी कंटेनर की पूरी ऊंचाई फैलाने के लिए व्यक्तिगत रूप से एक छिपा हुआ छद्म तत्व का उपयोग करने की चाल पसंद करता हूं, और इसे अन्य सामग्री के साथ लंबवत रूप से संरेखित करता हूं। क्रिस कोयियर तकनीक पर एक अच्छा लेख है। http://css-tricks.com/centering-in-the-unknown/ इसका बड़ा लाभ स्केलेबिलिटी है। आपको सामग्री की ऊंचाई जानने की ज़रूरत नहीं है या इसके बारे में चिंता / सिकुड़ने की चिंता नहीं है। यह समाधान तराजू :)।

यहां आपको आवश्यक सभी सीएसएस और एक कामकाजी उदाहरण के साथ एक पहेली है। http://jsfiddle.net/m5sLze0d/

.center:before {
    content: ""; /* Adding Extra Space Above Element */
    display: inline-block;
    height: 100%;
    margin-right: -0.3em;
    vertical-align: middle;
}
.center_element {
    display:inline-block;
    float:none;
    vertical-align:middle;
    white-space:normal;
    text-align:left;
}

यदि आप अभी भी ऊपर दिए गए अद्भुत उत्तरों को पढ़ने के बाद समझ में नहीं आये हैं।

यहां दो सरल उदाहरण दिए गए हैं कि आप इसे कैसे प्राप्त कर सकते हैं।

प्रदर्शन का उपयोग: टेबल-सेल

.wrapper {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 400px;
  height: 300px;
  border: 1px solid #555;
}

.container {
  display: inline-block;
  text-align: left;
  padding: 20px;
  border: 1px solid #cd0000;
}
<div class="wrapper">
  <div class="container">
    Center align a div using "<strong>display: table-cell</strong>"
  </div>
</div>

फ्लेक्स-बॉक्स का उपयोग करना (प्रदर्शन: फ्लेक्स)

.wrapper {
  display: flex;
  justify-content: center;
  width: 400px;
  height: 300px;
  border: 1px solid #555;
}

.container {
  align-self: center;
  padding: 20px;
  border: 1px solid #cd0000;
}
<div class="wrapper">
    <div class="container">
        Centering a div using "<strong>display: flex</strong>"
    </div>
</div>

नोट: उपर्युक्त कार्यान्वयन का उपयोग करने से पहले प्रदर्शन की ब्राउज़र संगतता की जांच करें: टेबल-सेल और फ्लेक्स।


लंबवत और क्षैतिज दोनों को संरेखित करने के लिए केंद्र:

#parentDiv{
    display:table;
    text-align:center;
}

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

हार्ड-टू-राइट और हार्ड-टू-बनाए रखने वाले सीएसएस के साथ गठबंधन में खुद को बांधने के बजाय (मुझे सावधानीपूर्वक क्रॉस-ब्राउज़र सत्यापन की भी आवश्यकता है!) मुझे सीएसएस पर छोड़ने और इसके बजाय आश्चर्यजनक रूप से सरल HTML 1.0 का उपयोग करना बेहतर लगता है:

<table id="outerDiv" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td valign="middle" id="innerDiv">
        </td>
    </tr>
</table>

यह मूल पोस्टर चाहता था सब कुछ पूरा करता है, और मजबूत और रखरखाव योग्य है।


सीएसएस की केवल 3 लाइनों के साथ वर्टिकल संरेखित कुछ भी

एचटीएमएल

<div class="parent-of-element">

    <div class="element">
        <p>Hello</p>
    </div>

</div>

सरल

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

सीएसएस

.parent-of-element {
   position: relative;
   height: 500px;
   /* or height: 73.61% */
   /* or height: 35vh */
   /* or height: ANY HEIGHT */
}

.element {
  position: absolute;
  top: 50%;

  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

shouldiprefix मुताबिक यह एकमात्र उपसर्ग है जो आपको चाहिए

जब तक तत्व के माता-पिता की ऊंचाई या कुछ सामग्री जो इसके ऊर्ध्वाधर आकार को फैलाती है, तब तक आप .parent-of-element की 'ऊंचाई' प्रॉपर्टी के मान के रूप में% का उपयोग कर सकते हैं।



यह आईई 6 पर वापस काम करेगा!

<!DOCTYPE html> आईई 6 पर भी आवश्यक है! [आईई 6 डिफ़ॉल्ट सख्त मोड भी मजबूर करेगा]।

(बेशक, बॉक्स रंग केवल डेमो प्रयोजनों के लिए है)

    #outer{
        width: 205px;
        height: 205px;
        margin: auto; 
        text-align: center;
    }
    #inner{
        text-align: left;
        vertical-align: middle;
        width: 120px;
        height: 120px;
        display: inline-block;
   
    }
    #center{
        height: 100%; width:0px;
        vertical-align: middle;
        display: inline-block;
    }
    div {background: rgba(0,128,255,.6)}
<div id=outer>
    <div id=center></div><div id=inner> The inner DIV
    </div>
</div>


#outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
        background:grey;
        display:flex;
        justify-content:center;
        align-items:center;
    }

    #innerDiv{
    background:cyan;
        width: 284px;
        height: 290px;

        
    }
<div id="outerDiv">
<div id="innerDiv">Inner Div
</div>
</div>

आप ऊपर वर्णित सीएसएस शैली को जोड़कर इसे कर सकते हैं। शुभकामनाएं। प्रश्न लिखने के लिए टिप्पणी लिखें





css3