क्षैतिज रूप से एक <div> केंद्र कैसे करें

Sep 22 2008

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

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

जवाब

4930 AhmerMH Sep 22 2008 at 19:29

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

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

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

यदि आप Internet Explorer 8 (और बाद में) को लक्षित कर रहे हैं , तो इसके बजाय ऐसा होना बेहतर हो सकता है:

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

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

यहाँ काम कर उदाहरण:

#inner {
  display: table;
  margin: 0 auto;
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
}

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

संपादित करें

इसके साथ flexboxdiv को क्षैतिज और अनुलंब रूप से केन्द्रित करना बहुत आसान है।

#inner {  
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
  display: flex;
  justify-content: center;
}

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

केंद्र को लंबवत रूप से संरेखित करने के लिए, संपत्ति का उपयोग करें align-items: center।

1288 Alfred Jan 21 2011 at 05:55

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

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

#inner {
  display: inline-block;
}

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

जो भीतर divको एक इनलाइन तत्व बनाता है, जिसे केन्द्रित किया जा सकता है text-align।

401 KongaRaju Aug 30 2012 at 19:05

सबसे अच्छा दृष्टिकोण सीएसएस 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%;
}

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

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

फ्लेक्स :

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

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

लिंक 2
लिंक 3
लिंक 4

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

W3C बॉक्स मॉडल को बेहतर क्यों माना जाता है?

265 nuno_cruz Dec 02 2011 at 02:52

मान लीजिए कि आपका div 200 पिक्सेल चौड़ा है:

.centered {
  position: absolute;
  left: 50%;
  margin-left: -100px;
}

सुनिश्चित करें कि पेरेंट तत्व है तैनात , यानी, रिश्तेदार, स्थिर, पूर्ण, या चिपचिपा।

यदि आप अपनी div की चौड़ाई नहीं जानते हैं, तो आप transform:translateX(-50%);ऋणात्मक मार्जिन के बजाय उपयोग कर सकते हैं ।

https://jsfiddle.net/gjvfxxdj/

साथ सीएसएस calc () , कोड और भी आसान प्राप्त कर सकते हैं:

.centered {
  width: 200px;
  position: absolute;
  left: calc(50% - 100px);
}

सिद्धांत अभी भी वही है; आइटम को बीच में रखें और चौड़ाई के लिए क्षतिपूर्ति करें।

240 TomMaton Sep 11 2013 at 18:32

मैंने यह उदाहरण बनाया है कि ऊर्ध्वाधर और क्षैतिज रूप से कैसे दिखाया जाए align।

कोड मूल रूप से यह है:

#outer {
  position: relative;
}

तथा...

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

और यह तब भी रहेगा centerजब आप अपनी स्क्रीन का आकार बदल लेंगे ।

226 Danield Apr 22 2013 at 17:32

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

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

तो बस पूर्णता के लिए यहां फ्लेक्सिबल बॉक्स लेआउट मॉड्यूल का उपयोग करके CSS 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>

आप जो flexbox के लिए पुराने सिंटैक्स का उपयोग पुराने ब्राउज़र का समर्थन करने की जरूरत है यहाँ है एक अच्छी जगह देखने के लिए।

147 SalmanvonAbbas May 13 2012 at 06:45

यदि आप एक निश्चित चौड़ाई निर्धारित नहीं करना चाहते हैं और अतिरिक्त मार्जिन नहीं चाहते हैं, तो display: inline-blockअपने तत्व में जोड़ें ।

आप उपयोग कर सकते हैं:

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

112 iamnotsam May 18 2014 at 01:38

अज्ञात ऊंचाई और चौड़ाई का एक केंद्र केंद्रित

क्षैतिज और लंबवत। यह यथोचित आधुनिक ब्राउज़रों (फ़ायरफ़ॉक्स, सफारी / वेबकीट, क्रोम, इंटरनेट एक्सप्लोरर 10, ओपेरा, आदि) के साथ काम करता है।

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<div class="content">This works with any content</div>

इसके साथ टिंकर कोडपैन पर या जेएसबीएन पर आगे ।

98 Sneakyness Jul 25 2009 at 05:00

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

97 gizmo Sep 22 2008 at 19:30

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

95 neoneye Mar 11 2012 at 20:37

CSS 3 का बॉक्स-संरेखित गुण

#outer {
    width: 100%;
    height: 100%;
    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
}

71 JamesMoberg Jun 24 2011 at 04:42

मुझे हाल ही में एक "छिपी" डिव (यानी display:none;) को केंद्र में रखना पड़ा , जिसके भीतर एक संक्षिप्त रूप था जिसे पृष्ठ पर केंद्रित करने की आवश्यकता थी। मैंने छिपे हुए डिव को प्रदर्शित करने के लिए निम्नलिखित 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>

68 william44isme Apr 07 2013 at 15:22

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

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

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

62 ch2o May 31 2012 at 22:32

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

<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:संपत्ति आधुनिक ब्राउज़रों के लिए वैकल्पिक है, लेकिन यह लीगेसी ब्राउज़र समर्थन के लिए इंटरनेट एक्सप्लोरर असामान्य मोड में आवश्यक है।

58 AnkitJain Jul 19 2013 at 17:21

प्रयोग करें:

#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}

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

55 KilianStinson Mar 12 2015 at 21:01

तत्वों में से एक के लिए एक चौड़ाई निर्धारित किए बिना इसके लिए एक और समाधान CSS 3 transformविशेषता का उपयोग कर रहा है ।

#outer {
  position: relative;
}

#inner {
  position: absolute;
  left: 50%;

  transform: translateX(-50%);
}

चाल यह है कि तत्व को अपनी चौड़ाई के बाईं ओर 50 प्रतिशत translateX(-50%)सेट करता है #inner। आप वर्टिकल अलाइनमेंट के लिए उसी ट्रिक का उपयोग कर सकते हैं।

यहाँ एक फिडल है जो क्षैतिज और ऊर्ध्वाधर संरेखण दिखा रहा है।

अधिक जानकारी मोज़िला डेवलपर नेटवर्क पर है ।

50 WillemdeWit Oct 25 2013 at 18:53

क्रिस कॉयियर जिन्होंने अपने ब्लॉग पर 'सेंटरिंग इन द अननोन' पर एक उत्कृष्ट पोस्ट लिखी । यह कई समाधानों का एक राउंडअप है। मैंने एक पोस्ट किया है जो इस प्रश्न में पोस्ट नहीं किया गया है। इसमें फ्लेक्सबॉक्स समाधान की तुलना में अधिक ब्राउज़र समर्थन है , और आप इसका उपयोग नहीं कर रहे हैं display: table;जो अन्य चीजों को तोड़ सकता है।

/* This parent can be any width and height */
.outer {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.outer:before {
  content: '.';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 0;
  overflow: hidden;
}

/* The element to be centered, can
   also be of any width and height */
.inner {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

45 BenjaminRH May 27 2013 at 23:12

मुझे हाल ही में एक दृष्टिकोण मिला:

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

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

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

39 LalitKumar Dec 04 2013 at 14:30

उदाहरण के लिए, इस लिंक और नीचे दिए गए स्निपेट को देखें:

div#outer {
  height: 120px;
  background-color: red;
}

div#inner {
  width: 50%;
  height: 100%;
  background-color: green;
  margin: 0 auto;
  text-align: center; /* For text alignment to center horizontally. */
  line-height: 120px; /* For text alignment to center vertically. */
}

<div id="outer" style="width:100%;">
  <div id="inner">Foo foo</div>
</div>

यदि आपके पास माता-पिता के तहत बहुत सारे बच्चे हैं, तो आपकी सीएसएस सामग्री को फिडल पर इस उदाहरण की तरह होना चाहिए ।

HTML सामग्री इस तरह दिखती है:

<div id="outer" style="width:100%;">
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> Foo Text </div>
</div>

फिर इस उदाहरण को बेला पर देखें ।

34 JohnSlegers Feb 19 2016 at 23:57

केवल क्षैतिज रूप से केंद्रित करना

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

बर्तन:

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

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

होना चाहिए 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-cell;
होना चाहिए vertical-align: middle;
होना चाहिए text-align: center;

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

होना चाहिए 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>

यह भी देखें फिडल !

32 joan16v Aug 22 2014 at 19:10

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

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}

<div id="outer">
  <div id="inner">Blabla</div>
</div>

32 SalmanA Jan 18 2014 at 01:18

यदि सामग्री की चौड़ाई अज्ञात है, तो आप निम्न विधि का उपयोग कर सकते हैं । मान लें कि हमारे पास ये दो तत्व हैं:

.outer -- पूर्ण चौड़ाई
.inner - कोई चौड़ाई सेट नहीं (लेकिन अधिकतम-चौड़ाई निर्दिष्ट की जा सकती है)

मान लीजिए कि तत्वों की गणना चौड़ाई क्रमशः 1000 पिक्सेल और 300 पिक्सेल है। निम्नलिखित के रूप में आगे बढ़ें:

.innerअंदर लपेटो.center-helper
बनाओ .center-helperएक इनलाइन ब्लॉक; यह एक ही आकार का हो जाता है, .innerजिससे यह 300 पिक्सेल चौड़ा हो जाता है।
.center-helperअपने माता-पिता के सापेक्ष 50% सही धक्का ; यह 500 पिक्सल के wrt पर बाईं ओर है। बाहरी।
.innerअपने माता-पिता के सापेक्ष 50% धक्का ; यह अपने बाएँ -150 पिक्सेल के स्थान पर है। सेंटर हेल्पर जिसका मतलब है कि इसका लेफ्ट 500 - 150 = 350 पिक्सल है। बाहरी।
.outerक्षैतिज स्क्रॉलबार को रोकने के लिए छिपे हुए ओवरफ़्लो पर सेट करें ।

डेमो:

body {
  font: medium sans-serif;
}

.outer {
  overflow: hidden;
  background-color: papayawhip;
}

.center-helper {
  display: inline-block;
  position: relative;
  left: 50%;
  background-color: burlywood;
}

.inner {
  display: inline-block;
  position: relative;
  left: -50%;
  background-color: wheat;
}

<div class="outer">
  <div class="center-helper">
    <div class="inner">
      <h1>A div with no defined width</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
          Duis condimentum sem non turpis consectetur blandit.<br>
          Donec dictum risus id orci ornare tempor.<br>
          Proin pharetra augue a lorem elementum molestie.<br>
          Nunc nec justo sit amet nisi tempor viverra sit amet a ipsum.</p>
    </div>
  </div>
</div>

28 KennethPalaganas Oct 14 2013 at 19:09

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

#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गुणों को हटा दें ;

28 PaoloForgia Jun 09 2017 at 15:34

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

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

display: block
display: inline
display: inline-block

#inner {
  display: inline-block;
}

#outer {
  text-align: center;
}

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

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

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

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

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

फ्लेक्सबॉक्स

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

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

#inner {
  display: inline-block;
}

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

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

परिवर्तन

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

#inner {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
}

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

`<center>` (पदावनत)

टैग

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

#inner {
  display: inline-block;
}

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

26 caniz Jan 28 2014 at 16:55

यहां आप सबसे छोटे तरीके से चाहते हैं।

JSFIDDLE

#outer {
    margin - top: 100 px;
    height: 500 px; /* you can set whatever you want */
    border: 1 px solid# ccc;
}

#inner {
    border: 1 px solid# f00;
    position: relative;
    top: 50 % ;
    transform: translateY(-50 % );
}

25 SandeshDamkondwar Apr 04 2017 at 03:12

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

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

25 MilanPanigrahi Jun 10 2018 at 22:53

आप display: flexअपने बाहरी डिव के लिए और क्षैतिज केंद्र के लिए उपयोग कर सकते हैंjustify-content: center

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

या आप अधिक विचारों के लिए w3schools - CSS flex प्रॉपर्टी पर जा सकते हैं ।

24 BillalBegueradj Sep 23 2016 at 13:49

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

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

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

23 MiguelLeite Feb 11 2014 at 22:51

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

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

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

21 Pnsadeghy Nov 17 2013 at 02:56

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

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

margin: auto 0;

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

text-align: center;

और देखो, बच्चा केंद्र जाता है।

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

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

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

उत्पादन में आरएल प्राप्त करने के लिए सबसे बड़ी बाधाएं क्या हैं?

क्या मेरी किताब के अंत में मेरे समलैंगिक चरित्र को मारना अपमानजनक है?

सबसे अच्छा तरीका है TryTransaction का उपयोग करने के लिए पकड़ने का प्रयास करें

क्या एक डबल-मजबूर मेट स्थिति है?

3 x 2 रपट पहेली

यदि अचार विटामिन सी को नष्ट कर देता है, तो विटामिन सी में सॉरेक्राट कैसे समृद्ध होता है?

शहरों में युद्ध छेड़ने का फैसला क्या है?

एक्सोडस में "शोन" के लिए एक असामान्य हिब्रू शब्द का उपयोग

के बेहतर अभिसरण के लिए स्टर्न-ब्रोकोट पेड़ को नियोजित किया जा सकता है $2^m/3^n$?

स्क्रिबन में लिंक आइटम के लिंक फ़ील्ड के href मान को प्राप्त करना [डुप्लिकेट]

शनि के छल्ले कैसे निकालें?

कुबेरनेट्स - क्या पॉड.यामल और सर्विस.एम्एल को एक यमल फ़ाइल (लेकिन बिना तैनाती के) में संयोजित करना संभव है