html - क्षैतिज रूप से<div> कैसे केन्द्रित करें?




css alignment (20)

मैं क्षैतिज रूप से <div> किसी अन्य <div> को सीएसएस का उपयोग करके कैसे केंद्रित कर सकता हूं? 

<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

केवल क्षैतिज केंद्रित

मेरे अनुभव में, क्षैतिज रूप से बॉक्स को केन्द्रित करने का सबसे अच्छा तरीका निम्न गुणों को लागू करना है:

बर्तन:

  • text-align: center; होना चाहिए text-align: center;

सामग्री बॉक्स:

  • display: inline-block; होना चाहिए display: inline-block;

डेमो: 

.container {
  width: 100%;
  height: 120px;
  background: #CCC;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}
<div class="container">
  <div class="centered-content">
    Center this!
  </div>
</div>

यह पहेली भी देखें!

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

मेरे अनुभव में, लंबवत और क्षैतिज दोनों बॉक्स को केन्द्रित करने का सबसे अच्छा तरीका एक अतिरिक्त कंटेनर का उपयोग करना और निम्न गुणों को लागू करना है:

बाहरी कंटेनर:

  • display: table; होना चाहिए display: table;

आंतरिक कंटेनर:

  • display: table-cell; होना चाहिए display: table-cell;
  • vertical-align: middle; होना चाहिए vertical-align: middle;
  • text-align: center; होना चाहिए text-align: center;

सामग्री बॉक्स:

  • display: inline-block; होना चाहिए display: inline-block;

डेमो: 

.outer-container {
  display: table;
  width: 100%;
  height: 120px;
  background: #CCC;
}

.inner-container {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}
<div class="outer-container">
  <div class="inner-container">
    <div class="centered-content">
      Center this!
    </div>
  </div>
</div>

यह पहेली भी देखें!

पाठ-संरेखण: केंद्र

text-align: center लागू करना text-align: center लाइनलाइन के भीतर इनलाइन सामग्री text-align: center केंद्रित है। हालांकि आंतरिक आवरण डिफ़ॉल्ट width: 100% आपको एक विशिष्ट चौड़ाई निर्धारित करना है या निम्न में से एक का उपयोग करना है: 

#inner {
  display: inline-block;
}

#outer {
  text-align: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

मार्जिन: 0 ऑटो

margin: 0 auto का उपयोग करना margin: 0 auto एक और विकल्प है और यह पुराने ब्राउज़र संगतता के लिए अधिक उपयुक्त है। यह display: table साथ मिलकर काम करता है display: table । 

#inner {
  display: table;
  margin: 0 auto;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

flexbox

display: flex ब्लॉक तत्व की तरह व्यवहार करता है और फ्लेक्सबॉक्स मॉडल के अनुसार अपनी सामग्री देता है। यह justify-content: center साथ काम करता justify-content: center ।

कृपया ध्यान दें: फ्लेक्सबॉक्स अधिकांश ब्राउज़रों के साथ संगत है लेकिन सभी नहीं। ब्राउज़र संगतता की एक पूर्ण और अद्यतित सूची के लिए here देखें। 

#inner {
  display: inline-block;
}

#outer {
  display: flex;
  justify-content: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

परिवर्तन

transform: translate आपको सीएसएस विजुअल फॉर्मेटिंग मॉडल के समन्वय स्थान को संशोधित करने देता है। इसका उपयोग करके, तत्वों का अनुवाद, घूर्णन, स्केल किया गया और तिरछा किया जा सकता है। क्षैतिज रूप से केंद्र के लिए इसे position: absolute आवश्यकता होती है position: absolute और left: 50% । 

#inner {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

<center> (बहिष्कृत)

टैग <center> text-align: center लिए HTML विकल्प है text-align: center । यह पुराने ब्राउज़र और अधिकांश नए लोगों पर काम करता है लेकिन इसे एक अच्छा अभ्यास नहीं माना जाता है क्योंकि यह सुविधा obsolete और इसे वेब मानकों से हटा दिया गया है। 

#inner {
  display: inline-block;
}
<div id="outer">
  <center>
    <div id="inner">Foo foo</div>
  </center>
</div>

आप इस सीएसएस को आंतरिक <div> लागू कर सकते हैं: 

#inner {
  width: 50%;
  margin: 0 auto;
}

बेशक, आपको width को 50% तक सेट करने की आवश्यकता नहीं है। युक्त <div> से कम की कोई भी चौड़ाई काम करेगी। margin: 0 auto वास्तविक केंद्रिंग क्या करता है।

यदि आप IE8 + को लक्षित कर रहे हैं, तो इसके बजाय यह बेहतर हो सकता है: 

#inner {
  display: table;
  margin: 0 auto;
}

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

यहां उदाहरण काम करना: 

#inner {
  display: table;
  margin: 0 auto;
}
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>

आप ऐसा कुछ कर सकते हैं 

#container {
   display: table;
   width: <width of your container>;
   height: <height of your container>;
}

#inner {
   width: <width of your center div>;
   display: table-cell;
   margin: 0 auto;
   text-align: center;
   vertical-align: middle;
}

यह लंबवत #inner को भी संरेखित करेगा। यदि आप नहीं चाहते हैं, तो display और vertical-align गुणों को हटा दें;

एक विकल्प मौजूद था कि मैंने पाया:

हर कोई उपयोग करने के लिए कहता है: 

margin: auto 0;

लेकिन एक और विकल्प है। इस संपत्ति को पैरेंट div के लिए सेट करें। यह किसी भी समय पूरी तरह से काम करता है: 

text-align: center;

और देखो, बच्चे जाओ केंद्र।

और अंत में आपके लिए सीएसएस: 

#outer{
     text-align: center;
     display: block; /* Or inline-block - base on your need */
}

#inner
{
     position: relative;
     margin: 0 auto; /* It is good to be */
}

कुछ पोस्टर्स ने display:box का उपयोग कर केंद्र में सीएसएस 3 तरीके का उल्लेख किया है display:box ।

यह वाक्यविन्यास पुराना है और अब इसका उपयोग नहीं किया जाना चाहिए। [ यह पोस्ट भी देखें ] ।

तो फ्लेक्सिबल बॉक्स लेआउट मॉड्यूल का उपयोग कर सीएसएस 3 में केंद्र करने का नवीनतम तरीका यहां पूर्णता के लिए है।

तो यदि आपके पास सरल मार्कअप है: 

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

... और आप अपने आइटम को बॉक्स के भीतर केंद्रित करना चाहते हैं, यहां आपको मूल तत्व (.box) पर क्या चाहिए: 

.box {
    display: flex;
    flex-wrap: wrap; /* Optional. only if you want the items to wrap */
    justify-content: center; /* For horizontal alignment */
    align-items: center; /* For vertical alignment */
}


.box {
  display: flex;
  flex-wrap: wrap;
  /* Optional. only if you want the items to wrap */
  justify-content: center;
  /* For horizontal alignment */
  align-items: center;
  /* For vertical alignment */
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.box {
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid tomato;
}
.box div {
  margin: 0 10px;
  width: 100px;
}
.item1 {
  height: 50px;
  background: pink;
}
.item2 {
  background: brown;
  height: 100px;
}
.item3 {
  height: 150px;
  background: orange;
}
<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

यदि आपको पुराने ब्राउज़र का समर्थन करने की आवश्यकता है जो फ्लेक्सबॉक्स के लिए पुराने सिंटैक्स का उपयोग करते हैं तो here's एक अच्छी जगह है।

खैर, मैं एक समाधान खोजने में कामयाब रहा जो शायद सभी परिस्थितियों में फिट होगा, लेकिन जावास्क्रिप्ट का उपयोग करता है:

यहां संरचना है: 

<div class="container">
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
</div>

और यहां जावास्क्रिप्ट स्निपेट है: 

$(document).ready(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

यदि आप इसे उत्तरदायी दृष्टिकोण में उपयोग करना चाहते हैं, तो आप निम्न जोड़ सकते हैं: 

$(window).resize(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

जिस तरह से मैं आमतौर पर करता हूं वह पूर्ण स्थिति का उपयोग कर रहा है: 

#inner{
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
}

इस काम के लिए बाहरी div को किसी भी अतिरिक्त संपत्ति की आवश्यकता नहीं है।

फ़ायरफ़ॉक्स और क्रोम के लिए: 

<div style="width:100%;">
  <div style="width: 50%; margin: 0px auto;">Text</div>
</div>

इंटरनेट एक्सप्लोरर, फ़ायरफ़ॉक्स और क्रोम के लिए: 

<div style="width:100%; text-align:center;">
  <div style="width: 50%; margin: 0px auto; text-align:left;">Text</div>
</div>

text-align: आधुनिक ब्राउज़र के लिए संपत्ति वैकल्पिक है, लेकिन यह विरासत ब्राउज़र समर्थन के लिए इंटरनेट एक्सप्लोरर क्विर्क मोड में आवश्यक है।

फ्लेक्स में 97% से अधिक ब्राउज़र समर्थन कवरेज है और कुछ लाइनों के भीतर इस तरह की समस्याओं को हल करने का सबसे अच्छा तरीका हो सकता है: 

#outer {
  display: flex;
  justify-content: center;
}

मुझे एहसास है कि मैं खेल के लिए बहुत देर हो चुकी हूं, लेकिन यह एक बहुत ही लोकप्रिय सवाल है, और मुझे हाल ही में एक ऐसा दृष्टिकोण मिला है जिसे मैंने यहां कहीं भी नहीं देखा है, इसलिए मुझे लगा कि मैं इसे दस्तावेज दूंगा। 

#outer {
    position: absolute;
    left: 50%;
}

#inner {
    position: relative;
    left: -50%;
}

संपादित करें: दोनों तत्वों को सही ढंग से कार्य करने के लिए एक ही चौड़ाई होना चाहिए।

मुझे हाल ही में एक "छुपा" div (यानी, डिस्प्ले: कोई नहीं;) केंद्रित करना पड़ा था, जिसमें उसमें एक सक्षम रूप था जिसे पृष्ठ पर केंद्रित करने की आवश्यकता थी। मैंने छिपी हुई div को प्रदर्शित करने के लिए निम्न jQuery लिखा और फिर तालिका की स्वत: जेनरेट की चौड़ाई में सीएसएस अपडेट करें और मार्जिन को केंद्र में बदलें। (डिस्प्ले टॉगल एक लिंक पर क्लिक करके ट्रिगर किया जाता है, लेकिन यह कोड प्रदर्शित करने के लिए आवश्यक नहीं था।)

नोट: मैं इस कोड को साझा कर रहा हूं क्योंकि Google ने मुझे इस स्टैक ओवरफ़्लो समाधान में लाया है और सबकुछ काम करता होगा सिवाय इसके कि छिपा तत्वों की कोई चौड़ाई नहीं है और उन्हें प्रदर्शित होने के बाद तक आकार / केंद्रित नहीं किया जा सकता है। 

$(function(){
  $('#inner').show().width($('#innerTable').width()).css('margin','0 auto');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inner" style="display:none;">
  <form action="">
    <table id="innerTable">
      <tr><td>Name:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="submit"></td></tr>
    </table>
  </form>
</div>

यदि आप आंतरिक div पर निश्चित चौड़ाई निर्धारित नहीं करना चाहते हैं तो आप ऐसा कुछ कर सकते हैं: 

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}
<div id="outer">  
    <div id="inner">Foo foo</div>
</div>

यह आंतरिक div को एक इनलाइन तत्व में बनाता है जिसे text-align साथ केंद्रित किया जा सकता है।

यदि आप इसे चौड़ाई नहीं देते हैं तो इसे केंद्रित नहीं किया जा सकता है, अन्यथा यह पूरी क्षैतिज स्थान डिफ़ॉल्ट रूप से ले जाएगा।

यह मेरा जवाब है। 

#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}
<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>

यह विधि भी ठीक काम करती है: 

div.container {
   display: flex;
   justify-content: center; /* for horizontal alignment */
   align-items: center;     /* for vertical alignment   */
}

आंतरिक <div> , केवल एक शर्त यह है कि इसकी height और width इसके कंटेनर के मुकाबले बड़ी नहीं होनी चाहिए।

सबसे अच्छा दृष्टिकोण सीएसएस 3 के साथ हैं।

बॉक्स मॉडल: 

#outer{
    width: 100%;

    /* Firefox */
    display: -moz-box;
    -moz-box-pack: center;
    -moz-box-align: center;

    /* Safari and Chrome */
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;

    /* W3C */
    display: box;
    box-pack: center;
    box-align: center;
}
#inner{
    width: 50%;
}

आपकी उपयोगिता के अनुसार आप box-orient, box-flex, box-direction गुणों का भी उपयोग कर सकते हैं।

फ्लेक्स : 

#outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

बाल तत्वों को केंद्रित करने के बारे में और पढ़ें

और यह बताता है कि बॉक्स मॉडल सबसे अच्छा तरीका क्यों है :

सबसे आसान तरीका: 

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}
<div id="outer">
  <div id="inner">Blabla</div>
</div>

width निर्धारित करें और margin-left और margin-right auto । हालांकि, यह केवल क्षैतिज के लिए है । यदि आप दोनों तरीकों से चाहते हैं, तो आप इसे दोनों तरीकों से करेंगे। प्रयोग करने से डरो मत; ऐसा नहीं है कि आप कुछ तोड़ देंगे।




html   css   alignment   centering  


centering