मैं अपने divs को क्षैतिज रूप से कैसे संरेखित कर सकता हूं?

Question

किसी कारण से मेरे डिव्स एक क्षैतिज रूप से एक div में केंद्र में नहीं होंगे:

.row {
  width: 100%;
  margin: 0 auto;
}
.block {
  width: 100px;
  float: left;
}

<div class="row">
  <div class="block">Lorem</div>
  <div class="block">Ipsum</div>
  <div class="block">Dolor</div>
</div>

और कभी-कभी इसमें केवल एक ब्लॉक div के साथ एक पंक्ति div होती है। मैं क्या गलत कर रहा हूं?

Comments

बहुत अच्छा लिंक: w3schools.com/css/css_inline-block.asp

— DIDIx13

Answer 1

आप जो करने की कोशिश कर रहे हैं उसे प्राप्त करने के लिए:

के display: inline-blockबजाय का उपयोग करने पर विचार करें float।

Answer 2

इसे इस्तेमाल करे:

.row {
  width: 100%;
  text-align: center; // center the content of the container
}

.block {
  width: 100px;
  display: inline-block; // display inline with ability to provide width/height
}​

डेमो

• margin: 0 auto;साथ होने के width: 100%कारण बेकार है क्योंकि आप तत्व को पूर्ण स्थान पर ले जाएंगे।

• float: leftतत्वों को बाईं ओर फ्लोट करेंगे, जब तक कि कोई जगह नहीं बची है, इस प्रकार वे एक नई लाइन पर जाएंगे। display: inline-blockतत्वों को इनलाइन प्रदर्शित करने में सक्षम होने के लिए उपयोग करें , लेकिन आकार प्रदान करने की क्षमता के साथ ( display: inlineजहां चौड़ाई / ऊंचाई की अनदेखी की जाती है)

Answer 3

CSS में संरेखण एक बुरा सपना था। सौभाग्य से, W3C द्वारा 2009 में एक नया मानक पेश किया गया है: लचीला बॉक्स । यहाँ इसके बारे में एक अच्छा ट्यूटोरियल है । व्यक्तिगत रूप से मुझे यह अन्य तरीकों की तुलना में बहुत अधिक तार्किक और समझने में आसान लगता है।

.row {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.block {
  width: 100px;
}

<div class="row">
  <div class="block">Lorem</div>
  <div class="block">Ipsum</div>
  <div class="block">Dolor</div>
</div>

Comments

यह divs संरेखित करने का एक शानदार तरीका है! और हाँ ... सीएसएस में संरेखण वैसे भी लंबे समय के लिए एक बुरा सपना रहा है!

— माइकल निस्कर्न

Answer 4

FlexBox का उपयोग करना:

<div class="row">
  <div class="block">Lorem</div>
  <div class="block">Ipsum</div>
  <div class="block">Dolor</div>
</div>

.row {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center; /* for centering 3 blocks in the center */
  /* justify-content: space-between; for space in between */ 
}
.block {
  width: 100px;
}

नवीनतम प्रवृत्ति फ्लोट का उपयोग करने के बजाय फ्लेक्स या सीएसएस ग्रिड का उपयोग करना है। हालाँकि, अभी भी कुछ 1% ब्राउज़र Flex का समर्थन नहीं करते हैं। लेकिन जो वास्तव में वैसे भी पुराने IE उपयोगकर्ताओं के बारे में परवाह है;)

फिडल: यहां देखें

Answer 5

एक और काम करने वाला उदाहरण , उपयोग display: inline-blockऔरtext-align: center

HTML :

<div class='container'>
    <div class='row'>
        <div class='btn'>Hello</div>
        <div class='btn'>World</div>
    </div>
    <div class='clear'></div>
</div>

सीएसएस :

.container {
    ...
}
.row {
    text-align: center;
}
.btn {
    display: inline-block;
    margin-right: 6px;
    background-color: #EEE;
}
.clear {
    clear: both;
}

फिडल: http://jsfiddle.net/fNvgS/

Answer 6

हालांकि इस प्रश्न को कवर नहीं किया जा रहा है (क्योंकि आप <div>कंटेनर के अंदर एस को संरेखित करना चाहते हैं ) लेकिन सीधे संबंधित: यदि आप क्षैतिज रूप से सिर्फ एक डिव को संरेखित करना चाहते हैं तो आप ऐसा कर सकते हैं:

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

Answer 7

तत्वों एक पंक्ति में प्रदर्शित करने के लिए कर रहे हैं और IE 6/7 बात नहीं करते हैं, तो उपयोग करने पर विचार display: tableऔर display: table-cellके बजाय float।

inline-blockतत्वों के बीच क्षैतिज अंतराल की ओर जाता है और उस अंतराल को शून्य करने की आवश्यकता होती है। सबसे आसान तरीका स्थापित करने के लिए है font-size: 0पेरेंट तत्व के लिए और फिर बहाल font-sizeबच्चे तत्वों के लिए है कि display: inline-blockउनकी स्थापना करके font-sizeएक करने के लिए pxया remमूल्य।

Answer 8

मैंने स्वीकार किए गए उत्तर की कोशिश की, लेकिन अंततः पाया कि:

margin: 0 auto;
width: anything less than 100%;

अब तक अच्छा काम करता है।

Answer 9

जब मुझे क्षैतिज div संरेखण को संभालने की आवश्यकता होती है, तो मैंने इस दो दृष्टिकोणों का उपयोग किया है।
पहला ( केंद्र संपत्ति का उपयोग करके संरेखित करना ):

.center-horizontal-align {
    margin-left: auto;
    margin-right: auto;
    width: (less than 100%) or in px
}

बाएं और दाएं मार्जिन को ऑटो पर सेट करना निर्दिष्ट करता है कि उन्हें उपलब्ध मार्जिन को समान रूप से विभाजित करना चाहिए। यदि चौड़ाई 100% है तो केंद्र-संरेखण का कोई प्रभाव नहीं है।

और दूसरा:

.center-horizontal-align {
    display: table
    margin-left: auto;
    margin-right: auto;
}

दूसरे दृष्टिकोण का उपयोग करना सुविधाजनक है जब आपके पास कई तत्व होते हैं और आप चाहते हैं कि सभी एक टेबल सेल (यानी एक सेल में कई बटन) में केंद्रित हों।