किसी अन्य div के अंदर 3 divs (बाएं / केंद्र / दाएं) को कैसे संरेखित करें?

392

मैं चाहता हूँ कि 3 divs एक कंटेनर div के अंदर संरेखित हों, कुछ इस तरह से:

[[LEFT]       [CENTER]        [RIGHT]]

कंटेनर div 100% चौड़ा (कोई सेट चौड़ाई नहीं) है, और कंटेनर का आकार बदलने के बाद केंद्र div केंद्र में रहना चाहिए।

इसलिए मैंने सेट किया:

#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}

लेकिन यह हो जाता है:

[[LEFT]       [CENTER]              ]
                              [RIGHT]

कोई सुझाव?

— serg
स्रोत

1

यदि कंटेनर 300px से अधिक चौड़ा हो जाता है, तो यह तब तक होने वाला है जब तक कि आप अतिप्रवाह गुण सेट न करें।

— इंकममॉन

फ्लेक्सबॉक्स और ग्रिड: jsfiddle.net/w0s4xmc0/12963

— मनोज कुमार

बस ध्यान दें करने के लिए - प्रति @ inkedmn की टिप्पणी के रूप में, प्रत्येक स्तंभ में सामग्री के एक समूह के साथ मैं उन सभी के बिना किसी भी कंटेनर चौड़ाई में ठीक से संरेखित करने के लिए नहीं मिल सका overflow: hidden;पर centerस्तंभ। फिर छोटे उपकरणों के लिए मीडिया क्वेरी में जब मेरे पास एक दूसरे के ऊपर पृष्ठ पर सभी 3 कॉलम केंद्र थे, मुझे overflow: hidden;मध्य पंक्ति (जो बड़े उपकरणों पर सही स्तंभ था) की आवश्यकता थी अन्यथा इसकी कोई ऊंचाई नहीं थी और लंबवत केंद्रित नहीं थी ऊपर और नीचे की पंक्ति के बीच।

— क्रिस एल

364

उस सीएसएस के साथ, अपने डिव को इस तरह रखें (पहले तैरता है):

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="center"></div>
</div>

PS आप दाएं तैर सकते हैं, फिर बाएं, फिर केंद्र। महत्वपूर्ण बात यह है कि झांकियां "मुख्य" केंद्र अनुभाग से पहले आती हैं।

पीपीएस आप अक्सर #containerइस स्निपेट के अंदर अंतिम चाहते हैं : <div style="clear:both;"></div>जो #containerकेवल अपनी ऊँचाई से लेने के बजाय दोनों साइड फ्लोट को समतल करने के लिए लंबवत विस्तारित करेगा #centerऔर संभवतः पक्षों को नीचे से बाहर निकालने की अनुमति देगा।

— dkamins
स्रोत

यदि कंटेनर 100% नहीं था तो आप इसे कैसे करेंगे? Im कुछ इस तरह की कोशिश कर रहा हूँ, मैं चाहूंगा कि डिव कंटेनर के अधिकार में रहे, लेकिन यह पेज के दाईं ओर तैरता है

— Tiago

@ टियागो: अगर इसके अंदर हो तो झांकियों को विवश होना चाहिए। जाँच करें कि कंटेनर की चौड़ाई इसे किस पर सेट करके है border:solid। यदि यह 100% है, तो इसे अपने पृष्ठ के अंदर रखने के लिए इसे किसी अन्य div में संलग्न करें।

— जेम्स पी।

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

— टेपफ्रीक

6

यह उत्तर छह साल से अधिक पुराना है। 2016 में, सही उत्तर फ्लेक्सबॉक्स है।

1

@torazaburo, शायद एक से अधिक सही उत्तर हैं, एक ही बिंदु तक पहुंचने के कई तरीके हैं, इस मामले में, मुझे इस समाधान का उपयोग करना होगा क्योंकि मैं उपयोग करने वाला एक फ्रेम, पहले से ही बाएं और दाएं सेट फ्लोट के साथ तत्वों तक, बस अंत में केंद्र तत्व जोड़ना मेरे लिए एकदम सही है।

— निंजा कोडिंग

128

यदि आप अपनी HTML संरचना को बदलना नहीं चाहते हैं, तो आप text-align: center;रैपर तत्व और display: inline-block;केंद्रित तत्व में जोड़कर भी कर सकते हैं ।

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

#left {
    float:left;
    width:100px;
}

#center {
    display: inline-block;
    margin:0 auto;
    width:100px;
}

#right {
    float:right;
    width:100px;
}

लाइव डेमो: http://jsfiddle.net/CH9K8/

— fruechtemuesli
स्रोत

1

यह एकमात्र समाधान है जो बहुत जल्द तह के बिना खिड़की की चौड़ाई के साथ ठीक से आकार लेता है।

— जेरेड सीली

2

यह सही है जब लेफ्ट और राइट साइज बराबर हैं। अन्यथा केंद्र केंद्रित नहीं है।

— मोर्टेलिस

126

फ्लेक्सबॉक्स का उपयोग करके तीन तलाक को क्षैतिज रूप से संरेखित करना

यहाँ एक div3 क्षैतिज रूप से एक और div के अंदर संरेखित करने के लिए एक CSS3 विधि है।

#container {
  display: flex;                  /* establish flex container */
  flex-direction: row;            /* default value; can be omitted */
  flex-wrap: nowrap;              /* default value; can be omitted */
  justify-content: space-between; /* switched from default (flex-start, see below) */
  background-color: lightyellow;
}
#container > div {
  width: 100px;
  height: 100px;
  border: 2px dashed red;
}

<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>

स्निपेट का विस्तार करें

jsFiddle

justify-contentसंपत्ति पाँच मूल्यों लेता है:

flex-start (चूक)
flex-end
center
space-between
space-around

सभी मामलों में, तीन तलाक एक ही पंक्ति में हैं। प्रत्येक मूल्य के विवरण के लिए देखें: https://stackoverflow.com/a/33856609/3597276

Flexbox के लाभ:

न्यूनतम कोड; बहुत ही कुशल
केंद्र, दोनों लंबवत और क्षैतिज रूप से, सरल और आसान है
समान ऊंचाई वाले स्तंभ सरल और आसान हैं
फ्लेक्स तत्वों को संरेखित करने के लिए कई विकल्प
यह उत्तरदायी है
फ्लोट्स और टेबल के विपरीत, जो सीमित लेआउट क्षमता प्रदान करते हैं क्योंकि वे लेआउट बनाने के लिए कभी नहीं थे, फ्लेक्सबॉक्स एक आधुनिक (CSS3) तकनीक है जिसमें विकल्पों की एक विस्तृत श्रृंखला है।

फ्लेक्सबॉक्स यात्रा के बारे में अधिक जानने के लिए:

फ्लेक्स आइटम को संरेखित करने के तरीके
सीएसएस लचीले बक्से ~ एमडीएन का उपयोग करना
फ्लेक्सबॉक्स ~ सीएसएस-ट्रिक्स के लिए एक पूर्ण गाइड
क्या Flexbox ?! ~ YouTube वीडियो ट्यूटोरियल

ब्राउज़र समर्थन: फ्लेक्सबॉक्स IE <10 को छोड़कर सभी प्रमुख ब्राउज़रों द्वारा समर्थित है । कुछ हालिया ब्राउज़र संस्करणों, जैसे कि सफारी 8 और IE10 को वेंडर उपसर्गों की आवश्यकता होती है । उपसर्ग जोड़ने के लिए एक त्वरित तरीके के लिए ऑटोप्रिफ़िशर का उपयोग करें । इस उत्तर में अधिक जानकारी ।

— माइकल बेंजामिन
स्रोत

7

फ्लैट्स का उपयोग करने की तुलना में फ्लेक्स बहुत बेहतर है।

— फैजान अकरम डार

1

यहाँ और इससे जुड़े पोस्टों में शानदार व्याख्या! एक सिडनोट: कंटेनर डिव के अंदर फ्लेक्स आइटम के रूप में "स्पान" तत्वों का उपयोग करके फ़ायरफ़ॉक्स में काम किया, लेकिन एक javafx आधारित ब्राउज़र (वेबव्यू) में काम नहीं किया। "स्पैन" को "डिव" में बदलते हुए दोनों में काम किया।

— अशोक

इंटरनेट एक्सप्लोरर 10 और पहले के संस्करण

— जस्ट

1

यह दुर्भाग्य से केवल समान-चौड़ाई वाली वस्तुओं के साथ काम करता है। इसके अलावा stackoverflow.com/questions/32551291/…

— संभालें

बहुत बढ़िया, मैंने यहाँ सभी समाधानों की कोशिश की और यह सबसे अच्छा है!

— निको म्यूलर

22

फ्लोट संपत्ति वास्तव में पाठ को संरेखित करने के लिए उपयोग नहीं की जाती है।

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

div > div { border: 1px solid black;}

<html>
     <div>
         <div style="float:left">First</div>
         <div style="float:left">Second</div>
         <div style="float:left">Third</div>

         <div style="float:right">First</div>
         <div style="float:right">Second</div>
         <div style="float:right">Third</div>
     </div>
</html>

स्निपेट का विस्तार करें

के लिए float:leftउत्पादन किया जाएगा[First][second][Third]

के लिए float:rightउत्पादन किया जाएगा[Third][Second][First]

इसका मतलब है कि फ्लोट => लेफ्ट प्रॉपर्टी आपके अगले एलिमेंट को पहले वाले लेफ्ट से जोड़ेगी, वही केस राइट के साथ

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

 <html>
     <div style="width:100%">
       <div style="float:left;width:50%">First</div>
       <div style="float:left;width:50%">Second</div>
       <div style="float:left;width:50%">Third</div>
     </div>
</html>

स्निपेट का विस्तार करें

[प्रथम क्षण]

[तृतीय]

इसलिए आपको सही परिणाम प्राप्त करने के लिए इन सभी पहलुओं पर विचार करने की आवश्यकता है

— राजीव पिंगले
स्रोत

13

मुझे अपनी पट्टियाँ चुस्त और गतिशील पसंद हैं। यह CSS 3 और HTML 5 के लिए है

सबसे पहले, चौड़ाई को 100px पर सेट करना सीमित है। यह मत करो।
दूसरा, कंटेनर की चौड़ाई को 100% तक सेट करना ठीक रहेगा, जब तक कि यह पूरे ऐप के लिए एक हेडर / फुटर बार होने की बात कर रहा है, जैसे नेविगेशन या क्रेडिट / कॉपीराइट बार। right: 0;इसके बजाय उस परिदृश्य के लिए उपयोग करें ।
आप पहचान-पत्र (हैश का उपयोग कर रहे #container, #left, आदि) वर्गों (के बजाय .container, .left,, आदि) है, जो ठीक है जब तक आप अपने कोड में कहीं और अपनी शैली पैटर्न दोहराना चाहते हैं। मैं इसके बजाय कक्षाओं का उपयोग करने पर विचार करूंगा।
HTML के लिए, बाएं, केंद्र, और दाएं: के लिए ऑर्डर स्वैप करने की आवश्यकता नहीं है। display: inline-block;इसे ठीक करता है, अपने कोड को कुछ क्लीनर और तार्किक रूप से फिर से क्रम में लौटाता है।
अंत में, आपको फ़्लैट को पूरी तरह से साफ़ करने की आवश्यकता है ताकि यह भविष्य के साथ खिलवाड़ न करे <div>। आप इसके साथ करते हैंclear: both;

संक्षेप में:

HTML:

<div class="container">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
  <div class="clear"></div>
</div>

सीएसएस:

.container {right: 0; text-align: center;}

.container .left, .container .center, .container .right { display: inline-block; }

.container .left { float: left; }
.container .center { margin: 0 auto; }
.container .right { float: right; }
.clear { clear: both; }

HAML और SASS;) का उपयोग करते हुए बोनस बिंदु

haml:

.container
  .left
  .center
  .right
  .clear

एस.ए.एस.एस.:

.container {
  right: 0;
  text-align: center;

  .left, .center, .right { display: inline-block; }

  .left { float: left; }
  .center { margin: 0 auto; }
  .right { float: right; }
  .clear { clear: both; }
}

— एरिक वानचिक
स्रोत

12

तत्वों को संरेखित करने के लिए कई तरकीबें उपलब्ध हैं।

01. टेबल ट्रिक का उपयोग करना

कोड स्निपेट दिखाएं

.container{
  display:table;
 }

.left{
  background:green;
  display:table-cell;
  width:33.33vw;
}

.center{
  background:gold;
  display:table-cell;
  width:33.33vw;
}

.right{
  background:gray;
  display:table-cell;
  width:33.33vw;
}

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

स्निपेट का विस्तार करें

02. फ्लेक्स ट्रिक का उपयोग करना

कोड स्निपेट दिखाएं

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

.left{
  background:green;
  width:33.33vw;
}

.center{
  background:gold;
   width:33.33vw;
}

.right{
  background:gray;
   width:33.33vw;
}

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

स्निपेट का विस्तार करें

03. फ्लोट ट्रिक का उपयोग करना

कोड स्निपेट दिखाएं

.left{
  background:green;
  width:100px;
  float:left;
}

.center{
   background:gold;
   width:100px;
   float:left;
}

.right{
   background:gray;
   width:100px;
   float:left;
}

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

स्निपेट का विस्तार करें

— संतोष खलसे
स्रोत

11

यह CSS3 फ्लेक्सबॉक्स का उपयोग करके आसानी से किया जा सकता है, एक ऐसी सुविधा जो भविष्य में उपयोग की जाएगी (जब <IE9पूरी तरह से मृत है) लगभग हर ब्राउज़र द्वारा।

ब्राउज़र संगतता तालिका की जाँच करें

एचटीएमएल

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

सीएसएस

.container {
  display: flex;
  flex-flow: row nowrap; /* Align on the same line */
  justify-content: space-between; /* Equal margin between the child elements */
}

आउटपुट:

कोड स्निपेट दिखाएं

.container {
  display: flex;
  flex-flow: row nowrap; /* Align on the same line */
  justify-content: space-between; /* Equal margin between the child elements */
}

/* For Presentation, not needed */

.container > div {
  background: #5F85DB;
  padding: 5px;
  color: #fff;
  font-weight: bold;
  font-family: Tahoma;
}

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

स्निपेट का विस्तार करें

— मनोज कुमार
स्रोत

4

ट्विटर बूटस्ट्रैप के साथ:

<p class="pull-left">Left aligned text.</p>
<p class="pull-right">Right aligned text.</p>
<p class="text-center">Center aligned text.</p>

— Ka।
स्रोत

3

संभव उत्तर, यदि आप html के क्रम को बनाए रखना चाहते हैं और फ्लेक्स का उपयोग नहीं करते हैं।

एचटीएमएल

<div class="a">
  <div class="c">
    the 
  </div>
  <div class="c e">
    jai ho 
  </div>
  <div class="c d">
    watsup
  </div>
</div>

सीएसएस

.a {
  width: 500px;
  margin: 0 auto;
  border: 1px solid red;
  position: relative;
  display: table;
}

.c {
  display: table-cell;
  width:33%;
}

.d {
  text-align: right;
}

.e {
  position: absolute;
  left: 50%;
  display: inline;
  width: auto;
  transform: translateX(-50%);
}

कोड पेन लिंक

— प्रथ्वी पी
स्रोत

2

HTML:

<div id="container" class="blog-pager">
   <div id="left">Left</div>
   <div id="right">Right</div>
   <div id="center">Center</div>    
</div>

सीएसएस:

 #container{width:98%; }
 #left{float:left;}
 #center{text-align:center;}
 #right{float:right;}

text-align:center; सही केंद्र संरेखित करता है।

JSFiddle डेमो

— खालिद फरहान
स्रोत

यह केवल आपके उदाहरण में div को केन्द्रित करता है क्योंकि पाठ तत्वों का आकार लगभग समान है, एक पाठ को लंबा बनाते हैं और #center div अब केंद्र में नहीं है: jsfiddle.net/3a4Lx239

— Kai Noack

1

मैंने इसे आसान बनाने और कंटेनर की आवश्यकता के बिना इसे प्राप्त करने का एक और प्रयास किया।

एचटीएमएल

.box1 {
  background-color: #ff0000;
  width: 200px;
  float: left;
}

.box2 {
  background-color: #00ff00;
  width: 200px;
  float: right;
}

.box3 {
  background-color: #0fffff;
  width: 200px;
  margin: 0 auto;
}

सीएसएस

  .box1 {
  background-color: #ff0000;
  width: 200px;
  float: left;
}

.box2 {
  background-color: #00ff00;
  width: 200px;
  float: right;
}

.box3 {
  background-color: #0fffff;
  width: 200px;
  margin: 0 auto;
}

आप इसे JSFiddle पर लाइव देख सकते हैं

— user15100
स्रोत

1

बूटस्ट्रैप 3 का उपयोग करके मैं बराबर चौड़ाई के 3 div (प्रत्येक कॉलम के लिए 12 कॉलम लेआउट 4 कॉलम में) बनाता हूं। इस तरह से आप अपने केंद्रीय क्षेत्र को केन्द्र में रख सकते हैं, भले ही बाएँ / दाएँ खंड में अलग-अलग चौड़ाई हो (यदि वे अपने कॉलम के स्थान को ओवरफ़्लो नहीं करते हैं)।

HTML:

<div id="container">
  <div id="left" class="col col-xs-4 text-left">Left</div>
  <div id="center" class="col col-xs-4 text-center">Center</div>
  <div id="right" class="col col-xs-4 text-right">Right</div>
</div>

सीएसएस:

#container {
  border: 1px solid #aaa;
  margin: 10px;
  padding: 10px;
  height: 100px;
}
.col {
  border: 1px solid #07f;
  padding: 0;
}

CodePen

पुस्तकालयों के बिना उस संरचना को बनाने के लिए मैंने बूटस्ट्रैप सीएसएस से कुछ नियमों की नकल की।

HTML:

<div id="container">
  <div id="left" class="col">Left</div>
  <div id="center" class="col">Center</div>
  <div id="right" class="col">Right</div>
</div>

सीएसएस:

* {
  box-sizing: border-box;
}
#container {
  border: 1px solid #aaa;
  margin: 10px;
  padding: 10px;
  height: 100px;
}
.col {
  float: left;
  width: 33.33333333%;
  border: 1px solid #07f;
  padding: 0;
}
#left {
  text-align: left;
}
#center {
  text-align: center;
}
#right {
  text-align: right;
}

CopePen

— mortalis
स्रोत

0

जब मैं केंद्र तत्व के रूप में एक छवि के साथ ऐसा करता हूं तो मुझे जो परिवर्तन करने पड़ते हैं, उन्हें स्वीकार किए गए उत्तर में बदलना पड़ता है :

सुनिश्चित करें कि छवि एक div के भीतर संलग्न है ( #centerइस मामले में)। यदि यह नहीं है, तो आपको फ़्लोट किए गए तत्वों के बीच के स्थान के सापेक्ष सेट displayकरना होगा block, और ऐसा लगता है।
छवि और उसके कंटेनर का आकार निर्धारित करना सुनिश्चित करें :
```
#center {
    margin: 0 auto;
}

#center, #center > img {
    width: 100px;
    height: auto;
}
```

— सैम
स्रोत

0

आप यह कोशिश कर सकते हैं:

आपका html कोड इस प्रकार है:

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="center"></div>
</div>

और आपका सीएसएस कोड इस प्रकार है:

#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}

इसलिए, यह आउटपुट इस तरह होना चाहिए:

[[LEFT]       [CENTER]        [RIGHT]]

— किशन राडिया
स्रोत

-1

.processList
  text-align: center
  li
  .leftProcess
    float: left
  .centerProcess
    float: none
    display: inline-block
  .rightProcess
    float: right

html
ul.processList.clearfix
  li.leftProcess

li.centerProcess
li.rightProcess

— शुभम
स्रोत

2

ढेर अतिप्रवाह में आपका स्वागत है! कृपया कुछ स्पष्टीकरण जोड़ें कि यह कोड ओपी की मदद क्यों करता है। यह एक उत्तर देने में मदद करेगा जिससे भविष्य के दर्शक सीख सकते हैं। अधिक जानकारी के लिए उत्तर कैसे देखें ।

— हेरिटेज बंदर

-3

आपने इसे सही ढंग से किया है, आपको केवल अपनी फ़्लैट साफ़ करने की आवश्यकता है। सीधे शब्दों में कहें

overflow: auto;

अपने कंटेनर वर्ग के लिए।

— मुस्तफा ज़गुल्ला
स्रोत

-6

सबसे आसान समाधान 3 स्तंभों के साथ एक तालिका टोकरा है और उस तालिका को केंद्र करना है।

एचटीएमएल:

 <div id="cont">
        <table class="aa">
            <tr>
                <td>
                    <div id="left">
                        <h3 class="hh">Content1</h3>
                        </div>
                    </td>
                <td>
                    <div id="center">
                        <h3 class="hh">Content2</h3>
                        </div>
                 </td>
                <td>
                    <div id="right"><h3 class="hh">Content3</h3>
                        </div>
                </td>
            </tr>
        </table>
    </div>

सीएसएस:

#cont 
{
  margin: 0px auto;    
  padding: 10px 10px;
}

#left
{    
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}

#center
{
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}

#right
{
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}

— स्टीम्बिसो एफ मखाथिनी
स्रोत

-10

#warpcontainer  {width:800px; height:auto; border: 1px solid #000; float:left; }
#warpcontainer2 {width:260px; height:auto; border: 1px solid #000; float:left; clear:both; margin-top:10px }

— बाइट्स
स्रोत

2

केवल कोड का एक खंड पोस्ट करने के बजाय, कृपया बताएं कि यह कोड समस्या का हल क्यों निकालता है। स्पष्टीकरण के बिना, यह एक उत्तर नहीं है।

— मार्टिजन पीटरर्स