सवाल क्षैतिज रूप से
किसी अन्य
को कैसे केंद्रित करें?


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

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


3636
2018-06-09 08:34


मूल


उन महान उत्तरों में से, मैं सिर्फ यह बताना चाहता हूं कि आपको "#inner" को "चौड़ाई" देना होगा, या यह "100%" होगा, और आप यह नहीं बता सकते कि यह पहले से केंद्रित है या नहीं। - Jony


जवाब:


आप इस सीएसएस को भीतरी में लागू कर सकते हैं <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>


4097



ऊर्ध्वाधर केंद्र के लिए मैं आमतौर पर "रेखा-ऊंचाई" (रेखा-ऊंचाई == ऊंचाई) का उपयोग करता हूं। यह सरल और अच्छा है लेकिन यह केवल एक पंक्ति सामग्री पाठ के साथ काम कर रहा है :) - Nicolas Guillaume
आईई पर इसे अच्छी तरह से काम करने के लिए आपको अपने एचटीएमएल पेज पर DOCTYPE टैग का उपयोग करना होगा। - Fabio
ध्यान दें कि "फ्लोट: कोई नहीं;" जोड़ना आवश्यक हो सकता है #inner के लिए। - Mert Mertce
आप शीर्ष और निचले मार्जिन को 0 पर भी सेट करते हैं, जो असंबंधित है। बेहतर डालने margin-left: auto; margin-right: auto मुझे लगता है। - Emmanuel Touzery
जरुरी नहीं margin:0 auto: यह हो सकता है margin: <whatever_vertical_margin_you_need> auto दूसरा क्षैतिज मार्जिन है। - YakovL


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

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

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

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


1111



@ सबाहांग उस के लिए सही वाक्यविन्यास होगा float: none; और शायद इसकी आवश्यकता है क्योंकि #inner को विरासत में मिला है float दोनों में से एक का left या right अपने सीएसएस में कहीं और से। - Doug McLean
यह एक अच्छा समाधान है। बस ध्यान रखें कि भीतर का वारिस होगा text-align तो आप आंतरिक सेट करना चाह सकते हैं text-align सेवा मेरे initial या कुछ अन्य मूल्य। - pmoleri


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

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

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


299



यह मेरे लिए भी काम करता है जब आंतरिक div तैरता है: बाएं; - Tareq
सुनिश्चित करें कि आप पढ़ते हैं यह जवाब इससे पहले कि आप इस समाधान को लागू करने के पहले जाएं। - cimmanon
सफारी, अभी तक, अभी भी आवश्यक है -webkit flexbox के लिए झंडे (display: -webkit-flex; तथा -webkit-align-items: center; तथा -webkit-justify-content: center;) - Joseph Hansen


मान लीजिए कि आपका div है 200px विस्तृत:

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

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

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

https://jsfiddle.net/gjvfxxdj/


216



यह सफारी में काम नहीं करता है - cesards
मुझे इस समाधान को पसंद नहीं है क्योंकि जब आंतरिक तत्व स्क्रीन के लिए बहुत व्यापक होता है, तो आप क्षैतिज रूप से पूरे तत्व को स्क्रॉल नहीं कर सकते हैं। मार्जिन: 0 ऑटो बेहतर काम करता है। - Aloso
आप मार्जिन बाएं क्यों डालते हैं: -100, यह काम नहीं करेगा - Robert Limanto
मैंने पढ़ा है कि यह एकमात्र तरीका है जो आईई 6/7 में काम करेगा - Andy
मार्जिन बाएं: ऑटो; मार्जिन-दाएं: ऑटो; ब्लॉक स्तर तत्व केंद्रित करता है - unicodexm


मैंने इसे बनाया है उदाहरण दिखाने के लिए कैसे करें खड़ी तथा क्षैतिज  align

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

#outer {
  position: relative;
}

तथा...

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

और यह में रहेगा center यहां तक ​​कि जब आप फिर से आकार आपकी स्क्रीन


200



इस विधि के लिए +1, मैं इसके साथ जवाब देने वाला था। ध्यान दें कि आपको उस तत्व पर चौड़ाई घोषित करनी होगी जिसे आप क्षैतिज रूप से केंद्र करना चाहते हैं (या लंबवत रूप से केंद्रित होने पर ऊंचाई)। यहां एक व्यापक स्पष्टीकरण दिया गया है: codepen.io/shshaw/full/gEiDt। लंबवत और / या क्षैतिज तत्वों को केंद्रित करने के अधिक बहुमुखी और व्यापक रूप से समर्थित तरीकों में से एक। - stvnrynlds
आप div के भीतर पैडिंग का उपयोग नहीं कर सकते हैं, लेकिन यदि आप भ्रम देना चाहते हैं तो उसी रंग की सीमा का उपयोग करें। - Squirrl
मुझे लगता है कि इस विधि के लिए काम करने के लिए, आपको आंतरिक div के साथ और ऊंचाई सेट करने की आवश्यकता है - Nicolas S.Xu


कुछ पोस्टर्स ने केंद्र का उपयोग करने के लिए सीएसएस 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>

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


158



stackoverflow.com/a/10010055/1312610 - ShibinRagh
"वाक्यविन्यास पुराना है" से आपका क्या मतलब है, क्या इसे बहिष्कृत किया गया है? - Konga Raju
फ्लेक्सबॉक्स विनिर्देश 3 प्रमुख संशोधन के माध्यम से चला गया है। सबसे हालिया मसौदा सितंबर 2012 से है, जो आधिकारिक तौर पर सभी पिछले ड्राफ्ट को हटा देता है। हालांकि, ब्राउज़र समर्थन स्पॉटी (विशेष रूप से पुराने एंड्रॉइड ब्राउज़र) है: stackoverflow.com/questions/15662578/... - cimmanon
यह क्रोम में मेरे लिए काम करता था जब जस्टिन पोली का संस्करण नहीं था। - Vern Jensen
@WouterVanherck यह पर निर्भर करता है flex-direction मूल्य। यदि यह 'पंक्ति' (डिफ़ॉल्ट) है - तो justify-content: center;  क्षैतिज संरेखण के लिए है (जैसे मैंने उत्तर में उल्लेख किया है) यदि यह 'कॉलम' है - तो justify-content: center; लंबवत संरेखण के लिए है। - Danield


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

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

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

120



प्रदर्शन के समान आवश्यकताओं: इनलाइन-ब्लॉक भी (quirksmode.org/css/display.html) - montrealmike
मैंने यह भी इस्तेमाल किया, लेकिन मुझे कभी सामना नहीं हुआ display: table; पहले। यह क्या करता है? - Matt Cremeens


CSS3 के बॉक्स-संरेखण संपत्ति

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

75



सुनिश्चित करें कि आप पढ़ते हैं यह जवाब इससे पहले कि आप इस समाधान को लागू करने के पहले जाएं। - cimmanon


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


74



और यदि आप चौड़ाई नहीं जानते हैं? कहें क्योंकि सामग्री गतिशील है? - gman
अधिकतम चौड़ाई? उस बारे में क्या? - Will Hoskings


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

क्षैतिज और लंबवत। यह उचित रूप से आधुनिक ब्राउज़र (फ़ायरफ़ॉक्स, सफारी / वेबकिट, क्रोम, इंटरनेट एक्सप्लोरर 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>

इसके साथ टिंकर आगे Codepen या चालू JSBin


74





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


70