सीएसएस केंद्र प्रदर्शन इनलाइन ब्लॉक?

Question

मेरे पास यहां एक काम करने वाला कोड है: http://jsfiddle.net/WVm5d/ (आपको संरेखण केंद्र प्रभाव को देखने के लिए परिणाम विंडो को बड़ा बनाने की आवश्यकता हो सकती है)

सवाल

कोड ठीक काम करता है, लेकिन मुझे पसंद नहीं है display: table;। यह एकमात्र तरीका है जिससे मैं रैप-क्लास संरेखित केंद्र बना सकता हूं। मुझे लगता है कि इसका इस्तेमाल करने का कोई तरीका display: block;या तरीका बेहतर होता display: inline-block;। क्या संरेखित केंद्र को दूसरे तरीके से हल करना संभव है?

कंटेनर के साथ एक निश्चित जोड़ना मेरे लिए कोई विकल्प नहीं है।

अगर भविष्य में JS Fiddle लिंक टूट गया तो मैं यहां अपना कोड भी डालूंगा:

body {
    background: #bbb;
}

.wrap {
    background: #aaa;
    margin: 0 auto;
    display: table;
    overflow: hidden;
}

.sidebar {
    width: 200px;
    float: left;
    background: #eee;
}

.container {
    margin: 0 auto;
    background: #ddd;
    display: block;
    float: left;
    padding: 5px;
}

.box {
    background: #eee;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 5px;
    float: left;
}

.box:nth-child(3n+1) {
    clear: left;
}

<div class="wrap">
    <div class="sidebar">
        Sidebar
    </div>
    <div class="container">
        <div class="box">
            Height1
        </div>
        <div class="box">
            Height2<br />
            Height2
        </div>
        <div class="box">
            Height3<br />
            Height3<br />
            Height3
        </div>
        <div class="box">
            Height1
        </div>
        <div class="box">
            Height2<br />
            Height2
        </div>
        <div class="box">
            Height3<br />
            Height3<br />
            Height3
        </div>
    </div>
    <div class="sidebar">
        Sidebar
    </div>
</div>

Answer 1

स्वीकृत समाधान मेरे लिए कारगर नहीं होगा क्योंकि मुझे display: inline-block100% चौड़ाई वाले माता-पिता के भीतर क्षैतिज और लंबवत रूप से केंद्रित होने के लिए एक बाल तत्व की आवश्यकता है ।

मैंने Flexbox justify-contentऔर align-itemsगुणों का उपयोग किया , जो क्रमशः आपको क्षैतिज और लंबवत रूप से तत्वों को केंद्र में रखने की अनुमति देते हैं। centerमाता-पिता दोनों को सेट करके , बाल तत्व (या यहां तक ​​कि कई तत्व!) पूरी तरह से बीच में होंगे।

इस समाधान के लिए निश्चित चौड़ाई की आवश्यकता नहीं है, जो मेरे लिए अनुपयुक्त होगा क्योंकि मेरे बटन का पाठ बदल जाएगा।

यहाँ एक CodePen डेमो और संबंधित कोड का एक स्निपेट नीचे दिया गया है:

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  display: inline-block;
}

<div class="parent">
  <a class="child" href="#0">Button</a>
</div>

Comments

यह प्रश्न फ्लेक्सबॉक्स से पहले बनाया गया था, लेकिन अब यह दृष्टिकोण बेहतर है, इसलिए मैंने इसे उत्तर के रूप में स्वीकार किया।

— जेन्स टॉर्नेल

@ JensTörnell इनलाइन-ब्लॉक का उपयोग बेकार है इस मामले में इसे हटा दिया जा सकता है

— तैमनी Afif

यह पाठ-संरेखित केंद्र का उपयोग करने से बहुत बेहतर है। यह कार्यान्वयन केवल सभी बाल घटकों के लिए पाठ-केंद्रित लीक करता है। यह मत करो।

— ट्रेस

Answer 2

इसे इस्तेमाल करे। मैंने text-align: centerशरीर और display:inline-blockलपेटने के लिए जोड़ा , और फिर अपने को हटा दियाdisplay: table

body {
    background: #bbb;
    text-align: center;
}

.wrap {
    background: #aaa;
    margin: 0 auto;
    display: inline-block;
    overflow: hidden;
}

Comments

@ ज़ैक इनलाइन-ब्लॉक के रूप में प्रदर्शित होने पर पाठ की तरह काम करता है। आप उन white-space: nowrap;पर भी सामान का उपयोग कर सकते हैं ।

— User 2

और क्या होगा अगर मैं नहीं चाहता कि मेरे सभी तत्व bodyपाठ-संरेखित केंद्र में रखे जाएँ ?? यह मेरे लिए बहुत बड़ा लगता है

— 20:29 पर phil294

@ ब्लौहिरन, बस एक ब्लॉक रैपर आर्नेल इनलाइन-ब्लॉक एलिमेंट बनाते हैं और फिर सीएसएस प्रॉपर्टी टेक्स्ट-अलाइन सेट करते हैं: सेंटर; वह उदाहरण के रूप में बॉडी टैग का उपयोग करता है।

— अरसलान शेख

Answer 3

यदि आपके पास एक <div>है text-align:center;, तो उसके अंदर कोई भी पाठ उस कंटेनर तत्व की चौड़ाई के संबंध में केंद्रित होगा। inline-blockतत्वों को इस उद्देश्य के लिए पाठ के रूप में माना जाता है, इसलिए वे भी केंद्रित होंगे।

Comments

प्रदर्शन के बारे में कैसे: इनलाइन तत्व? मैंने परीक्षण किया कि यह उस तरह से काम नहीं कर रहा है जैसा मैं करने की उम्मीद कर रहा हूं

— जेकब

Answer 4

आप इसे पोजिशनिंग के साथ भी कर सकते हैं, माता-पिता को रिश्तेदार के लिए सेट कर सकते हैं और बच्चे को पूर्ण से तलाक के लिए।

.wrapper {
      position: relative;
  }
.childDiv {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
  }

Answer 5

आपको "प्रदर्शन: तालिका" का उपयोग करने की आवश्यकता नहीं है। आपके मार्जिन का कारण: 0 ऑटो सेंटिंग प्रयास काम नहीं करता है क्योंकि आपने कोई चौड़ाई निर्दिष्ट नहीं की है।

यह ठीक काम करेगा:

.wrap {
    background: #aaa;
    margin: 0 auto;
    width: some width in pixels since it's the container;
}

आपको प्रदर्शन निर्दिष्ट करने की आवश्यकता नहीं है: उस div के बाद से ब्लॉक डिफ़ॉल्ट रूप से ब्लॉक किया जाएगा। तुम भी शायद अतिप्रवाह खो सकते हैं: छिपा हुआ।

Answer 6

@ Vijayscode के उत्तर के समान, यह क्षैतिज रूप से एक इनलाइन-ब्लॉक तत्व को केंद्र में रखेगा (लेकिन साथ ही साथ अपने माता-पिता की शैलियों को संशोधित करने की आवश्यकता के बिना):

  display: inline-block;
  position: relative;
  left: 50%; // Move the element to the left by 50% of the container's width
  transform: translateX(-50%); // Calculates 50% of the element's width and moves it by that amount across the X-axis to the left

Answer 7

मैंने सिर्फ 2 पैरामीटर बदले हैं:

.wrap {
    display: block;
    width:661px;
}

लाइव डेमो

Comments

मेरे साथ एक निश्चित सेट करना कोई विकल्प नहीं है। एक और उपाय मिला। फिर भी धन्यवाद।

— जेन्स टॉर्नेल

तो क्या था?

— रिचीएच

Answer 8

महान लेख मैंने पाया कि मेरे लिए सबसे अच्छा काम क्या आकार में एक% जोड़ना था

.wrap {
margin-top:5%;
margin-bottom:5%;
height:100%;
display:block;}

Answer 9

महज प्रयोग करें:

line-height:50px

"50px" को अपने div के समान ऊँचाई से बदलें।

Comments

कृपया इसमें और अधिक विशिष्ट होना चाहिए कि कहां जोड़ना है line-height।

— मार्सेल गेवरर

मूल प्रश्न क्षैतिज केंद्रीकरण के बारे में था, जैसा कि इसके उपयोग से संकेत मिलता है text-align: center;। लाइन-ऊंचाई को समायोजित करना ऊर्ध्वाधर केंद्र के लिए एक समाधान है, हालांकि इनलाइन-ब्लॉक के लिए बहुत मजबूत समाधान नहीं है।

— cdaddr