चौड़ाई के बिना एक डिव ब्लॉक को केंद्रित करना

Question

जब मैं div ब्लॉक "उत्पादों" को केंद्र में रखने की कोशिश करता हूं तो मुझे एक समस्या होती है क्योंकि मुझे पहले से div चौड़ाई का पता नहीं है। किसी के पास कोई हल है?

अद्यतन: मेरे पास जो समस्या है, वह यह नहीं है कि मैं कितने उत्पादों को प्रदर्शित करूंगा, मेरे पास 1, 2 या 3 उत्पाद हो सकते हैं, मैं उन्हें केंद्र में रख सकता हूं यदि यह एक निश्चित संख्या थी जैसा कि मुझे माता-पिता की चौड़ाई पता होगी div, मुझे नहीं पता कि यह कैसे करना है जब सामग्री गतिशील है।

.product_container {
  text-align: center;
  height: 150px;
}

.products {
  height: 140px;
  text-align: center;
  margin: 0 auto;
  clear: ccc both; 
}
.price {
  margin: 6px 2px;
  width: 137px;
  color: #666;
  font-size: 14pt;
  font-style: normal;
  border: 1px solid #CCC;
  background-color:	#EFEFEF;
}

<div class="product_container">
  <div class="products" id="products">
    <div id="product_15">
      <img src="/images/ecommerce/card_default.png">
      <div class="price">R$ 0,01</div>
    </div>

    <div id="product_15">
      <img src="/images/ecommerce/card_default.png">
      <div class="price">R$ 0,01</div>
    </div>   

    <div id="product_15">
      <img src="/images/ecommerce/card_default.png">
      <div class="price">R$ 0,01</div>
    </div>
  </div>
</div>

Comments

वास्तव में आपको क्या समस्या हो रही है?

— anand.trex

Answer 1

27 फरवरी 2015 को अपडेट करें: मेरा मूल उत्तर मतदान हो रहा है, लेकिन अब मैं सामान्य रूप से इसके बजाय @ बॉबिन के दृष्टिकोण का उपयोग करता हूं।

.child { /* This is the item to center... */
  display: inline-block;
}
.parent { /* ...and this is its parent container. */
  text-align: center;
}

ऐतिहासिक उद्देश्यों के लिए मेरा मूल पद:

आप इस दृष्टिकोण को आज़माना चाहते हैं।

<div class="product_container">
    <div class="outer-center">
        <div class="product inner-center">
        </div>
    </div>
    <div class="clear"/>
</div>

यहाँ मिलान शैली है:

.outer-center {
    float: right;
    right: 50%;
    position: relative;
}
.inner-center {
    float: right;
    right: -50%;
    position: relative;
}
.clear {
    clear: both;
}

JSFiddle

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

आप कर सकते हैं अंत में है कि खाली div जरूरत है यदि आप "product_container" के लिए ऊंचाई आकार करने के लिए अपने "उत्पाद" सामग्री पर निर्भर हैं।

Comments

यदि आप div के overflow:hiddenलिए प्रदान नहीं करते हैं , .product_containerतो इसके outer-centerआस-पास की अन्य सामग्री को ओवरलैप कर देंगे। कोई लिंक या बटन outer-centerअभ्यस्त काम के अधिकार के लिए। outer-centerकी आवश्यकता को समझने के लिए पृष्ठभूमि का रंग आज़माएं overflow :hidden। यह Cicil Thomas

— Benjol

यह दृष्टिकोण डेस्कटॉप वेबसाइटों के लिए एकदम सही है ... मोबाइल वाले इनर-डिव से दाईं ओर संलग्न होते हैं। क्या कोई हल है?

— माइकल डार्ट

मुझे इसके बारे में बताओ! कभी-कभी हमें बस एक समाधान की आवश्यकता होती है और एक अच्छे को चुनने की लक्जरी नहीं होती है। एक एकल-कक्ष तालिका एक अन्य विकल्प है, हालाँकि एक कक्ष एक तालिका वास्तव में एक तालिका नहीं है, क्या यह है?

— माइक एम। लिन

@fgysin सहमत, यह एक काउंटर-सहज हैक है। और डिजाइनर आश्चर्यचकित हैं कि लोग अभी भी टेबल-आधारित लेआउट पर वापस गिरने पर विचार क्यों कर रहे हैं।

— नीरस

यह सवाल पांच साल पुराना है। यह उत्तर पुराना है, लेकिन शुरू करने के लिए कभी बहुत सुरुचिपूर्ण नहीं था। आपको क्या करना चाहिए प्रदर्शन का उपयोग करें: इनलाइन-ब्लॉक

— रे बॉलिंग

Answer 2

'डिस्प्ले: ब्लॉक' (डिव डिफ़ॉल्ट रूप से है) के साथ एक तत्व की चौड़ाई उसके कंटेनर की चौड़ाई से निर्धारित होती है। आप किसी ब्लॉक की चौड़ाई उसकी सामग्री की चौड़ाई (सिकोड़ने योग्य) पर निर्भर नहीं कर सकते।

(सीएसएस 2.1 में 'फ्लोट: लेफ्ट / राइट' ब्लॉक को छोड़कर, लेकिन यह सेंटिंग के लिए कोई उपयोग नहीं है।)

आप ब्लॉक-इन-फिट ऑब्जेक्ट में एक ब्लॉक को चालू करने के लिए 'डिस्प्ले' प्रॉपर्टी को 'इनलाइन-ब्लॉक' पर सेट कर सकते हैं जिसे उसके माता-पिता की टेक्स्ट-संरेखित संपत्ति द्वारा नियंत्रित किया जा सकता है, लेकिन ब्राउज़र समर्थन धब्बेदार है। यदि आप उस तरह से जाना चाहते हैं तो आप ज्यादातर हैक (जैसे। देखें -मोज़-इनलाइन-स्टैक) का उपयोग करके इसके साथ भाग सकते हैं।

जाने का दूसरा रास्ता टेबल है। यह आवश्यक हो सकता है जब आपके पास ऐसे कॉलम हों जिनकी चौड़ाई वास्तव में पहले से नहीं जानी जा सकती है। मैं वास्तव में नहीं बता सकता कि आप उदाहरण कोड से क्या करने की कोशिश कर रहे हैं - वहाँ कुछ भी स्पष्ट नहीं है जिसमें एक हटना-से-फिट ब्लॉक की आवश्यकता होगी - लेकिन उत्पादों की एक सूची को संभवतः सारणी माना जा सकता है।

[पी एस। वेब पर फ़ॉन्ट आकार के लिए कभी भी 'pt' का उपयोग न करें। 'px' अधिक विश्वसनीय है यदि आपको वास्तव में निश्चित आकार के पाठ की आवश्यकता है, अन्यथा '%' जैसी सापेक्ष इकाइयाँ बेहतर हैं। और "स्पष्ट: ccc दोनों" - एक टाइपो?]

.center{
   text-align:center; 
}

.center > div{ /* N.B. child combinators don't work in IE6 or less */
   display:inline-block;
}

JSFiddle

Comments

जनक -> पाठ-संरेखण: केंद्र |

— बच्चा-

display: inline-blockIE7 और फ़ायरफ़ॉक्स के पुराने संस्करणों में समर्थित नहीं है

— जेक विल्सन

IE7 के लिए @Jakobud "प्रदर्शन: इनलाइन; जूम: 1;" "प्रदर्शन: इनलाइन-ब्लॉक;" के बजाय। यह ब्लॉक तत्वों के लिए काम करता है।

— मिहेल-हरितोनोव

इस विधि को पार करने वाले ब्राउज़र का उपयोग करने के बारे में अधिक जानकारी के लिए इस लिंक को देखें - blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block

— keyoke

मैंने इसे लागू करने के लिए इस scss का उपयोग किया था, जो तब तक काम करेगा जब तक कि आपका html संरचना इसका समर्थन करने के लिए मौजूद है: .center {text-align: center; &: पहला-बच्चा {प्रदर्शन: इनलाइन-ब्लॉक; }}

— डोवव हेफेट्ज

Answer 3

अधिकांश ब्राउज़र display: table;CSS नियम का समर्थन करते हैं । यह अतिरिक्त HTML को जोड़े बिना कंटेनर में एक डिव को केंद्रित करने के लिए एक अच्छी चाल है और न ही कंटेनर में विवश करने वाली शैलियों को लागू करता है (जैसे कि कंटेनर में text-align: center;अन्य सभी इनलाइन सामग्री को केंद्र में रखेगा), जबकि निहित डिव के लिए गतिशील चौड़ाई रखते हुए:

HTML:

<div class="container">
  <div class="centered">This content is centered</div>
</div>

सीएसएस:

.centered { display: table; margin: 0 auto; }

.container {
  background-color: green;
}
.centered {
  display: table;
  margin: 0 auto;
  background-color: red;
}

<div class="container">
  <div class="centered">This content is centered</div>
</div>

---

अपडेट (2015-03-09):

आज ऐसा करने का उचित तरीका वास्तव में फ्लेक्सबॉक्स नियमों का उपयोग करना है। ब्राउज़र समर्थन थोड़ा अधिक प्रतिबंधित है ( फ्लेक्सबॉक्स समर्थन बनाम सीएसएस तालिका समर्थन ) लेकिन यह विधि कई अन्य चीजों की भी अनुमति देती है, और इस प्रकार के व्यवहार के लिए एक समर्पित सीएसएस नियम है:

HTML:

<div class="container">
  <div class="centered">This content is centered</div>
</div>

सीएसएस:

.container {
  display: flex;
  flex-direction: column; /* put this if you want to stack elements vertically */
}
.centered { margin: 0 auto; }

.container {
  display: flex;
  flex-direction: column; /* put this if you want to stack elements vertically */
  background-color: green;
}
.centered {
  margin: 0 auto;
  background-color: red;
}

<div class="container">
  <div class="centered">This content is centered</div>
</div>

Comments

मुझे लगता है कि यह निश्चित रूप से सबसे अच्छा समाधान है। फ़्लोटिंग नेस्टेड डिव, या ऐसा कुछ भी के साथ किसी भी अजीब हैक को शामिल नहीं करता है। मुझे लगता है कि इसका एकमात्र कारण यह नहीं है कि उच्चतर मूल्यांकन किया गया है क्योंकि लोग तालिकाओं के खिलाफ बहुत दूर चले गए हैं। यह एक तालिका नहीं है, इसलिए मुझे लगता है कि यह पूरी तरह से वैध तरीका है।

— डेन जोन्स

सहमत, यह सबसे अच्छा समाधान लगता है। जबकि @ बॉबिसन का समाधान सरल होने के साथ-साथ आंतरिक तत्व में शैलियों को बदलने का दुष्प्रभाव है।

— जर्गह

display: table;संस्करण छद्म तत्वों (के लिए आदर्श है ::before, ::after) जहां अतिरिक्त मार्कअप नहीं जोड़ सकते हैं, और आप आसन्न तत्व शैलियों को बचने के विघटन करना चाहते हैं।

— Walf

Answer 4

उस बिल्ली को त्वचा के छह तरीके:

बटन एक: कुछ भी प्रकार display: blockपूर्ण माता-पिता की चौड़ाई को मान लेगा। (जब तक कि के साथ संयुक्त floatया एक display: flexमाता पिता)। सच। खराब उदाहरण।

बटन 2: के लिए जा रहा display: inline-blockहै स्वचालित (पूर्ण के बजाय) चौड़ाई को बढ़ावा मिलेगा। फिर आप text-align: center रैपिंग ब्लॉक पर केंद्र का उपयोग कर सकते हैं । शायद सबसे आसान, और सबसे व्यापक रूप से संगत, यहां तक ​​कि 'विंटेज' ब्राउज़रों के साथ ...

.wrapTwo
  text-align: center;
.two
  display: inline-block; // instantly shrinks width

बटन 3: रैप पर कुछ भी डालने की जरूरत नहीं। तो शायद यह सबसे सुरुचिपूर्ण समाधान है। साथ ही लंबवत काम करता है। (Transtlate के लिए ब्राउज़र समर्थन इन दिनों काफी अच्छा है ()IE9) ...)।

position: relative;
display: inline-block; // instantly shrinks width
left: 50%;
transform: translateX(-50%);

Btw: अज्ञात ऊंचाई के लंबवत केंद्रित ब्लॉकों के लिए एक शानदार तरीका (पूर्ण स्थिति के संबंध में)।

बटन 4: पूर्ण स्थिति। बस रैपर में पर्याप्त ऊँचाई आरक्षित करना सुनिश्चित करें, क्योंकि दोपहर के बाद (न तो स्पष्ट और न ही निहित ...)

.four
  position absolute
  top 0
  left 50%
  transform translateX(-50%)
.wrapFour
  position relative // otherwise, absolute positioning will be relative to page!
  height 50px // ensure height
  background lightgreen // just a marker

बटन 5: फ्लोट (जो डायनामिक चौड़ाई में ब्लॉक-स्तरीय तत्व भी लाता है) और एक सापेक्ष बदलाव। हालांकि मैंने इसे जंगली में कभी नहीं देखा है। शायद नुकसान हैं ...

.wrapFive
  &:after // aka 'clearfix'
    content ''
    display table
    clear both

.five  
  float left
  position relative
  left 50%
  transform translateX(-50%)

अपडेट: बटन 6: और आजकल, आप फ्लेक्स-बॉक्स का भी उपयोग कर सकते हैं। ध्यान दें, कि शैलियाँ केंद्रित वस्तु के आवरण पर लागू होती हैं।

.wrapSix
  display: flex
  justify-content: center

→ पूर्ण स्रोत कोड (स्टाइलस सिंटैक्स)

Answer 5

मुझे एक और अधिक सुंदर समाधान मिला, फ्लोट का उपयोग करने से बचने के लिए "इनलाइन-ब्लॉक" का संयोजन और हैकी स्पष्ट: दोनों। यह अभी भी नेस्टेड divs tho की आवश्यकता है, जो बहुत शब्दार्थ नहीं है, लेकिन यह सिर्फ काम करता है ...

div.outer{
    display:inline-block;
    position:relative;
    left:50%;
}

div.inner{
    position:relative;
    left:-50%;
}

आशा करता हूँ की ये काम करेगा!

Answer 6

<div class="outer">
   <div class="target">
      <div class="filler">
      </div>
   </div>
</div>

.outer{
   width:100%;
   height: 100px;
}

.target{
   position: absolute;
   width: auto;
   height: 100px;
   left: 50%;
   transform: translateX(-50%);
}

.filler{
   position:relative;
   width:150px;
   height:20px;
}

यदि लक्ष्य तत्व बिल्कुल तैनात है, तो आप इसे 50% एक दिशा ( left: 50%) में स्थानांतरित कर सकते हैं और फिर इसे विपक्षी दिशा ( transform:translateX(-50%)) में 50% बदल सकते हैं । यह लक्ष्य तत्व की चौड़ाई (या साथ width:auto) को परिभाषित किए बिना काम करता है । मूल तत्व की स्थिति स्थिर, पूर्ण, सापेक्ष या स्थिर हो सकती है।

Comments

यह उस चीज़ की आधी चौड़ाई से केंद्र होगा जो आप केंद्रित कर रहे हैं।

— 4imble

@ 4imble नहीं यह नहीं होगा। "बाईं" संपत्ति इसे 50% (अपने माता-पिता की चौड़ाई का 50%) स्थानांतरित करती है, और TranslX (-50%) इसे 50% दूसरे तरीके से ले जाती है (लक्ष्य तत्व की चौड़ाई का 50%)।

— 221 बजे वेस्ट

आह हाँ, मैं अनुवाद याद किया। यकीन नहीं है कि यह IE 11 से पहले किसी भी IE में विश्वसनीय है। लेकिन आप सही हैं।

— 4imble

Answer 7

डिफ़ॉल्ट रूप से, divतत्वों को ब्लॉक तत्वों के रूप में प्रदर्शित किया जाता है, इसलिए उनकी 100% चौड़ाई होती है, जिससे वे अर्थहीन हो जाते हैं। जैसा कि एरी द्वारा सुझाया गया है, आपको एक निर्दिष्ट करना होगा widthऔर आप तब उपयोग कर सकते हैं autoजब marginकेंद्र को निर्दिष्ट करने के लिए निर्दिष्ट करें div।

वैकल्पिक रूप से, आप भी मजबूर कर सकते हैं display: inline, लेकिन तब आपके पास कुछ ऐसा होगा जो एक के spanबजाय बहुत व्यवहार करता है div, ताकि बहुत अधिक समझ में न आए ।

Answer 8

यह एक तत्व को क्रमबद्ध सूची, या अव्यक्त सूची, या किसी भी तत्व के रूप में केन्द्रित करेगा। बस इसे आउटरमेंट के वर्ग के साथ एक डिव के साथ लपेटें और इनर एलिमेंट के आंतरिक तत्व को दें।

आईई, पुराने मोज़िला और सबसे नए ब्राउज़रों के लिए बाहरी वर्ग के खाते हैं।

 .outerElement {
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: middle;
        zoom: 1;
        position: relative;
        left: 50%;
    }

.innerElement {
    position: relative;
    left: -50%;
} 

Comments

कृपया अपने कोड के साथ एक विवरण जोड़ें। इस पर कोड पोस्ट करने से एसओ के भविष्य के आगंतुकों के लिए बहुत मायने नहीं रखेगा।

— रेन

Answer 9

उचित-सामग्री के साथ css3 फ्लेक्सबॉक्स का उपयोग करें: केंद्र;

    <div class="row">
         <div class="col" style="background:red;">content1</div>
          <div class="col" style="">content2</div>
    </div>


.row {
    display: flex; /* equal height of the children */
    height:100px;
    border:1px solid red;
    width: 400px;
    justify-content:center;
}

Answer 10

माइक एम। लिन के जवाब पर थोड़ा बदलाव

यदि आप overflow: auto;(या hidden) को जोड़ते हैं div.product_container, तो आपको आवश्यकता नहीं है div.clear।

यह इस लेख से लिया गया है -> http://www.quirksmode.org/css/clearing.html

यहाँ संशोधित HTML है:

<div class="product_container">
    <div class="outer-center">
        <div class="product inner-center">
        </div>
    </div>
</div>

और यहाँ सीएसएस संशोधित किया गया है:

.product_container {
  overflow: auto;
  /* width property only required if you want to support IE6 */
  width: 100%;
}

.outer-center {
  float: right;
  right: 50%;
  position: relative;
}

.inner-center {
  float: right;
  right: -50%;
  position: relative;
}

कारण, इसके बिना बेहतर क्यों है div.clear(इसके अलावा यह एक खाली तत्व होने के लिए गलत लगता है) फ़ायरफ़ॉक्स का अति-मार्जिन मार्जिन असाइनमेंट है।

यदि, उदाहरण के लिए, आपके पास यह html है:

<div class="product_container">
    <div class="outer-center">
        <div class="product inner-center">
        </div>
    </div>
    <div style="clear: both;"></div>
</div>
<p style="margin-top: 11px;">Some text</p>

फिर, फ़ायरफ़ॉक्स (लिखने के बिंदु पर 8.0) में, आपको पहले11px मार्जिन दिखाई देगा । क्या बुरा है, यह है कि आपको पूरे पृष्ठ के लिए एक ऊर्ध्वाधर स्क्रॉल पट्टी मिलेगी, भले ही सामग्री स्क्रीन आयामों में अच्छी तरह से फिट हो। product_container

Answer 11

इस नए सीएसएस और मार्कअप की कोशिश करें

यहाँ संशोधित HTML है:

<div class="product_container">
<div class="products" id="products">
   <div id="product_15" class="products_box">
       <img src="/images/ecommerce/card_default.png">
       <div class="price">R$ 0,01</div>
   </div>
   <div id="product_15" class="products_box">
       <img src="/images/ecommerce/card_default.png">
       <div class="price">R$ 0,01</div>
   </div>   
   <div id="product_15" class="products_box">
       <img src="/images/ecommerce/card_default.png">
       <div class="price">R$ 0,01</div>
   </div>
</div>

और यहाँ सीएसएस संशोधित किया गया है:

<pre>
.product_container 
 {
 text-align:    center;
 height:        150px;
 }

.products {
    left: 50%;
height:35px;
float:left;
position: relative;
margin: 0 auto;
width:auto;
}
.products .products_box
{
width:auto;
height:auto;
float:left;
  right: 50%;
  position: relative;
}
.price {
    margin:        6px 2px;
    width:         137px;
    color:         #666;
    font-size:     14pt;
    font-style:    normal;
    border:        1px solid #CCC;
    background-color:   #EFEFEF;
}

Answer 12

<div class="product_container">
<div class="outer-center">
<div class="product inner-center">
    </div>
</div>
<div class="clear"></div>
</div>

.outer-center
{
float: right;
right: 50%;
position: relative;
}
.inner-center 
{
float: right;
right: -50%;
position: relative;
}
.clear 
{
clear: both;
}

.product_container
{
overflow:hidden;
}

यदि आप "ओवरफ्लो: हिडन" को ".product_container" प्रदान नहीं करते हैं, तो "बाहरी-केंद्र" div इसके पास की अन्य सामग्री को ओवरलैप कर देगा। "बाहरी-केंद्र" के काम के दाईं ओर कोई लिंक या बटन नहीं। "अतिप्रवाह: छिपी" की आवश्यकता को समझने के लिए "बाहरी-केंद्र" के लिए पृष्ठभूमि का रंग आज़माएं

Answer 13

मुझे दिलचस्प समाधान मिला, मैं स्लाइडर बना रहा था और स्लाइड नियंत्रण केंद्र करना था और मैंने यह किया और ठीक काम करता है। आप माता-पिता के सापेक्ष स्थिति भी जोड़ सकते हैं और बच्चे की स्थिति को लंबवत स्थानांतरित कर सकते हैं। देखिए http://jsfiddle.net/bergb/6DvJz/

सीएसएस:

#parent{
        width:600px;
        height:400px;
        background:#ffcc00;
        text-align:center;
    }

#child{
        display:inline-block;
        margin:0 auto;
        background:#fff;
    }  

HTML:

<div id="parent">
    <div id="child">voila</div>
</div>

Answer 14

करें display:table;और सेट marginकरेंauto

महत्वपूर्ण बिट कोड:

.relatedProducts {
    display: table;
    margin-left: auto;
    margin-right: auto;
}

अब आपके पास जितने भी तत्व हैं वह केंद्र में स्वतः संरेखित होंगे

कोड स्निपेट में उदाहरण:

.relatedProducts {
    display: table;
    margin-left: auto;
    margin-right: auto;
}
a {
  text-decoration:none;
}

<div class="row relatedProducts">
<div class="homeContentTitle" style="margin: 100px auto 35px; width: 250px">Similar Products</div>
					
<a href="#">test1 </a>
<a href="#">test2 </a>
<a href="#">test3 </a>
</div>

Answer 15

मुझे डर है कि ऐसा करने का एकमात्र तरीका स्पष्ट रूप से निर्दिष्ट करना है कि चौड़ाई (हांडी) तालिकाओं का उपयोग करना है।

Comments

rephrased: यदि आप CSS, नेस्टेड DIV और ब्राउज़र के सभी प्रकार के संयोजन की कोशिश करते हुए अगले घंटे बिताना नहीं चाहते हैं, तो सीधे तालिकाओं पर जाएं।

— एडुआर्डो मोल्टनी

टेबल्स को डिज़ाइन तत्वों के रूप में उपयोग करने के लिए डिज़ाइन नहीं किया गया है। यह खराब शैली है।

— सेबी 2020

Answer 16

गंदे तय, लेकिन यह काम करता है ...

सीएसएस:

#mainContent {
    position:absolute;
    width:600px;
    background:#FFFF99;
}

#sidebar {
    float:left;
    margin-left:610px;
    max-width:300;
    background:#FFCCCC;
}
#sidebar{


    text-align:center;
}

HTML:

<center>
<table border="0" cellspacing="0">
  <tr>
    <td>
<div id="mainContent">
1<br/>
<br/>
123<br/>
123<br/>
123<br/>
</div><div id="sidebar"><br/>
</div></td>
</tr>
</table>
</center>

Answer 17

पुराने ब्राउज़र में काम करने वाली सरल फिक्स (लेकिन तालिकाओं का उपयोग नहीं करती है, और सेट करने के लिए ऊंचाई की आवश्यकता होती है):

<div style="width:100%;height:40px;position:absolute;top:50%;margin-top:-20px;">
  <table style="width:100%"><tr><td align="center">
    In the middle
  </td></tr></table>
</div>

Answer 18

<style type="text/css">
.container_box{
    text-align:center
}
.content{
    padding:10px;
    background:#ff0000;
    color:#ffffff;

}

इनर डिव्स का उपयोग स्पान्ट से होता है

<div class="container_box">
   <span class="content">Hello</span>
</div>

Answer 19

मुझे पता है कि यह प्रश्न पुराना है, लेकिन मैं इस पर एक दरार ले रहा हूं। बॉबिन के जवाब के समान लेकिन काम कोड उदाहरण के साथ।

प्रत्येक उत्पाद को इनलाइन-ब्लॉक करें। कंटेनर की सामग्री को केंद्र में रखें। किया हुआ।

http://jsfiddle.net/rgbk/6Z2Re/

<style>
.products{
    text-align:center;
}

.product{
    display:inline-block;
    text-align:left;

    background-image: url('http://www.color.co.uk/wp-content/uploads/2013/11/New_Product.jpg');
    background-size:25px;
    padding-left:25px;
    background-position:0 50%;
    background-repeat:no-repeat;
}

.price {
    margin:        6px 2px;
    width:         137px;
    color:         #666;
    font-size:     14pt;
    font-style:    normal;
    border:        1px solid #CCC;
    background-color:   #EFEFEF;
}
</style>


<div class="products">
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
</div>

इन्हें भी देखें: सीएसएस में गतिशील चौड़ाई के साथ केंद्र इनलाइन-ब्लॉक

Comments

क्या यह जवाब पहले से ही एक ही समाधान प्रदान नहीं करता है? stackoverflow.com/a/284064/547733

— मैक्सिमे रॉसिनि

तुम ठीक कह रहे हो, मैडमॉक्स! हालांकि यह उतना मजबूत नहीं है। इसके अलावा, मैं यह महसूस कर रहा हूं कि पाठ-संरेखण को बाएं या दाएं पर सेट करने का अर्थ है कि यह कभी भी उन अनुवादों वाली साइट पर काम नहीं करेगा जिनमें बाएं से दाएं पढ़ने के क्रम को दाएं-बाएं से बदलना शामिल है। पाठ-संरेखण पाठ संरेखित करने के लिए है, तत्व नहीं। आदर्श रूप में निकट भविष्य में हम प्रदर्शन पर निर्भर करेंगे: इस तरह की चीज के लिए फ्लेक्स।

— रे बॉलिंग

Answer 20

यह एक div के भीतर कुछ भी केंद्रित करने का एक तरीका है जो तत्वों की आंतरिक चौड़ाई को नहीं जानता है।

#product_15{
    position: relative;
    margin: 0 auto;
    display: table;
}
.price, img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Answer 21

मेरा समाधान था:

.parent {
    display: flex;
    flex-wrap: wrap;
}

.product {
    width: 240px;
    margin-left: auto;
    height: 127px;
    margin-right: auto;
}

Answer 22

इस सीएसएस को अपने product_container वर्ग में जोड़ें

    margin: 0px auto;
    padding: 0px;
    border:0;
    width: 700px;

Comments

प्रश्न विशेष रूप से "बिना चौड़ाई के" कहता है

— डीज़ उडज़ुए