एक और div के भीतर अस्थायी divs केंद्रित

Question

मैंने अन्य प्रश्नों की खोज की है और जबकि यह समस्या दूसरों के एक जोड़े के समान है, मैंने अभी तक जो कुछ भी देखा है वह उस मुद्दे को संबोधित करने के लिए लगता है जो मैं कर रहा हूं।

मेरे पास एक div है जिसमें कई अन्य div हैं, जिनमें से प्रत्येक को बाईं ओर फ्लोट किया गया है। इन divs में एक फोटो और एक कैप्शन है। मैं केवल यही चाहता हूं कि तस्वीरों का समूह युक्त डिव के भीतर केंद्रित हो।

जैसा कि आप नीचे दिए गए कोड से देख सकते हैं, मैंने माता-पिता दोनों पर overflow:hiddenऔर दोनों का उपयोग करने की कोशिश की है margin:x auto, और मैंने clear:bothफ़ोटो के बाद एक (जैसा कि किसी अन्य विषय में सुझाव दिया गया है) जोड़ा है । कुछ भी फर्क नहीं पड़ता।

धन्यवाद। मैं किसी भी सुझाव की सराहना करता हूं।

<div style="position: relative; margin: 0 auto; overflow: hidden; text-align: center;">
    <h4>Section Header</h4>

    <div style="margin: 2em auto;">

        <div style="float: left; margin: auto 1.5em;">
            <img src="photo1.jpg" /><br />
             Photo Caption
        </div>
        <div style="float: left; margin: auto 1.5em;">
            <img src="photo2.jpg" /><br />
             Photo Caption
        </div>
        <div style="float: left; margin: auto 1.5em;">
            <img src="photo3.jpg" /><br />
             Photo Caption
        </div>

        <div style="clear: both; height: 0; overflow: hidden;"> </div>

    </div>

</div>

Comments

के संभावित डुप्लिकेट मैं कैसे केंद्र नाव तत्वों करते हैं?

— टायलरएच

@ टायलर कैसे आए? जब पूछा गया तो बस तारीख देखें। लगता है जैसे आपके लिंक में सवाल असली डुप्लिकेट है।

— प्रागटमिक

@ ThePragmatick क्योंकि उस व्यक्ति के पास दो बार के रूप में कई विचार हैं, अधिक उत्तर, अधिक (और हाल ही में) गतिविधि, और इसका शब्दांकन इस से बेहतर विहित प्रश्न के रूप में कार्य करता है।

— टायलरएच

Answer 1

सबसे पहले, floatआंतरिक divs पर विशेषता को हटा दें । फिर, text-align: centerमुख्य बाहरी पर डाल दिया div। और आंतरिक divएस के लिए, का उपयोग करें display: inline-block। उन्हें स्पष्ट चौड़ाई देने के लिए भी बुद्धिमान होना चाहिए।

---

<div style="margin: auto 1.5em; display: inline-block;">
  <img title="Nadia Bjorlin" alt="Nadia Bjorlin" src="headshot.nadia.png"/>
  <br/>
  Nadia Bjorlin
</div>

Comments

@ डैरेन: क्या आपने कोशिश करते समय तैरना बंद कर दिया था? जब तक आप तैर रहे हैं / जब तक आप तैरने वाले कंटेनर पर एक निश्चित चौड़ाई निर्धारित नहीं कर लेते, तब तक आप जो चाहते हैं वह पूरा नहीं कर पाएंगे।

— केन ब्राउनिंग

ओह ... मैं गलत हूं। फ्लोट को हटाने से ऐसा लगता है कि यह वही है जो मैं चाहता हूं। मुझे यकीन नहीं है कि मैं समझता हूं कि क्यों, लेकिन ... बहुत बहुत धन्यवाद।

— डैरेन

@ डेरेन, मेरे कोड उदाहरण में नोटिस मैंने फ्लोटिंग को शामिल नहीं किया है;) अगली बार और अधिक ध्यान से पढ़ें, यह आपको कुछ निराशा से बचाएगा :) ख़ुशी है कि आपको यह पता चल गया, हालांकि। अच्छा काम जारी रखें, और एसओ में आपका स्वागत है।

— सैम्पसन

यह दृष्टिकोण तब विफल होने लगता है जब कुछ छवि कैप्शन लाइन रैप करने के लिए पर्याप्त होते हैं। कोई अन्य सुझाव?

— greg.kindel

नेवरमाइंड, ने पाया कि अलग-अलग-लाइन-कैप्शन की समस्या को 'वर्टिकल-एलाइन: टॉप' के साथ ठीक किया जा सकता है। =)

— greg.kindel

Answer 2

फ्लेक्सबॉक्स के साथ आप आसानी से क्षैतिज (और लंबवत) केंद्र एक डिव के अंदर बच्चों को तैर सकते हैं ।

इसलिए यदि आपके पास सरल मार्कअप है जैसे:

<div class="wpr">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

सीएसएस के साथ:

.wpr
{
    width: 400px;
    height: 100px;
    background: pink;
    padding: 10px 30px;
}

.wpr span
{
    width: 50px;
    height: 50px;
    background: green;
    float: left; /* **children floated left** */
    margin: 0 5px;
}

(यह अपेक्षित (- और अवांछनीय) परिणाम है )

अब रैपर में निम्नलिखित नियम जोड़ें:

display: flex;
justify-content: center; /* align horizontal */

और तैरते हुए बच्चों को संरेखित केंद्र ( DEMO ) मिलता है

बस मज़े के लिए, ऊर्ध्वाधर संरेखण पाने के लिए और बस जोड़ें:

align-items: center; /* align vertical */

डेमो

Comments

अभी भी ब्राउज़र-संगतता की जांच करनी है, लेकिन यह बहुत बढ़िया लगता है!

— low_rents

तुम भी प्रदर्शन का उपयोग कर सकते हैं: इनलाइन के बजाय फ्लेक्स के लिए केंद्र divs। फ्लेक्स में सफारी और ओपेरा के मुद्दे हैं।

— आप 20

इनलाइन मेरे लिए काम नहीं करता है। इस समाधान की समस्या यह है कि तब बक्से 2 पंक्ति में नहीं जाते हैं यदि वे div की चौड़ाई को ओवरफ्लो करते हैं। तो आप वास्तव में उन्हें एक मेज में बदल दिया ...

— पावेल जेरी स्ट्रनड

Answer 3

मैंने सापेक्ष स्थिति और दाईं ओर तैरने का उपयोग करके उपरोक्त को पूरा किया।

HTML कोड:

<div class="clearfix">                          
    <div class="outer-div">
        <div class="inner-div">
            <div class="floating-div">Float 1</div>
            <div class="floating-div">Float 2</div>
            <div class="floating-div">Float 3</div>
        </div>
    </div>
</div>

सीएसएस:

.outer-div { position: relative; float: right; right: 50%; }
.inner-div { position: relative; float: right; right: -50%; }
.floating-div { float: left; border: 1px solid red; margin: 0 1.5em; }

.clearfix:before,
.clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

JSFiddle: http://jsfiddle.net/MJ9yp/

यह IE8 और ऊपर में काम करेगा, लेकिन पहले नहीं (आश्चर्य, आश्चर्य!)

मुझे दुर्भाग्य से इस विधि का स्रोत याद नहीं है, इसलिए मैं मूल लेखक को श्रेय नहीं दे सकता। अगर किसी और को पता है, तो कृपया लिंक पोस्ट करें!

Comments

+1 यह खूबसूरती से काम करता है। स्वीकृत जवाब मेरे काम नहीं आया। इसने वर्टिकल अलाइनमेंट इश्यूज बनाए ...

— टिमह - कोडिडक्ट

@ पार्टी के लिए देर हो चुकी है, मुझे पता है, लेकिन कंटेनर में 'वर्टिकल-अलाइन: टॉप' जोड़कर वर्टिकल अलाइनमेंट इश्यू को फिक्स किया जा सकता है

— अल्फी

क्षमा करें, मेरा मतलब इनर डिव है, कंटेनर डिव * नहीं

— अल्फी

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

— पावेल झिरी स्ट्रनड

Answer 4

निम्न समाधान इनलाइन ब्लॉक का उपयोग नहीं करता है। हालाँकि, इसके लिए दो हेल्पर डीवी की आवश्यकता होती है:

1. सामग्री मंगाई गई है
2. आंतरिक सहायक तैरता है (यह सामग्री के रूप में ज्यादा फैलता है)
3. आंतरिक सहायक को दाएं 50% धकेल दिया जाता है (बाहरी सहायक के केंद्र के साथ इसका बायां संरेखण)
4. सामग्री को 50% बाईं ओर खींचा गया है (इसका केंद्र आंतरिक सहायक के बाईं ओर संरेखित है)
5. बाहरी सहायक को अतिप्रवाह छिपाने के लिए सेट किया गया है

.ca-outer {
  overflow: hidden;
  background: #FFC;
}
.ca-inner {
  float: left;
  position: relative;
  left: 50%;
  background: #FDD;
}
.content {
  float: left;
  position: relative;
  left: -50%;
  background: #080;
}
/* examples */
div.content > div {
  float: left;
  margin: 10px;
  width: 100px;
  height: 100px;
  background: #FFF;
}
ul.content {
  padding: 0;
  list-style-type: none;
}
ul.content > li {
  margin: 10px;
  background: #FFF;
}

<div class="ca-outer">
  <div class="ca-inner">
    <div class="content">
      <div>Box 1</div>
      <div>Box 2</div>
      <div>Box 3</div>
    </div>
  </div>
</div>
<hr>
<div class="ca-outer">
  <div class="ca-inner">
    <ul class="content">
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      <li>Nullam efficitur nulla in libero consectetur dictum ac a sem.</li>
      <li>Suspendisse iaculis risus ut dapibus cursus.</li>
    </ul>
  </div>
</div>

Answer 5

display: inline-block;IE के किसी भी ब्राउज़र में काम नहीं करेगा। यहाँ वही है जो मैंने प्रयोग किया।

// change the width of #boxContainer to 
// 1-2 pixels higher than total width of the boxes inside:

#boxContainer {         
    width: 800px; 
    height: auto;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#Box{
    width: 240px; 
    height: 90px;
    background-color: #FFF;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
}

Answer 6

उपाय:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Knowledge is Power</title>
        <script src="js/jquery.js"></script>
        <script type="text/javascript">
        </script>
        <style type="text/css">
            #outer {
                text-align:center;
                width:100%;
                height:200px;
                background:red;
            }
            #inner {
                display:inline-block;
                height:200px;
                background:yellow;
            }
        </style>
    </head>
    <body>
        <div id="outer">
            <div id="inner">Hello, I am Touhid Rahman. The man in Light</div>
        </div>
    </body>
</html>

Comments

यह समाधान ऑफ टॉपिक है। आंतरिक को तैरना चाहिए: ओपी की आवश्यकताओं को पूरा करने के लिए छोड़ दिया गया।

— s15199d

Answer 7

मेरे मामले में, मुझे मेरे लिए काम करने के लिए @ सैम्पसन द्वारा जवाब नहीं मिल सका, सबसे अच्छा मुझे पेज पर केंद्रित एक कॉलम मिला। हालांकि इस प्रक्रिया में, मैंने सीखा कि फ्लोट वास्तव में कैसे काम करता है और इस समाधान का निर्माण करता है। इसके मूल में यह फिक्स बहुत ही सरल है लेकिन इस धागे से स्पष्ट है जिसे इस पोस्ट के बिना 146k से अधिक बार देखा गया है।

स्क्रीन स्पेस चौड़ाई की कुल मात्रा के लिए आवश्यक है कि वांछित लेआउट पर कब्जा हो जाए और फिर माता-पिता को समान चौड़ाई बना दें और मार्जिन लागू करें: ऑटो। बस!

लेआउट में तत्व "बाहरी" div की चौड़ाई और ऊंचाई तय करेंगे। प्रत्येक "myFloat" या तत्व की चौड़ाई या ऊंचाई + उसकी सीमाएं + उसके मार्जिन और उसके पैडिंग लें और उन सभी को एक साथ जोड़ें। फिर अन्य तत्वों को एक ही फैशन में एक साथ जोड़ें। यह आपको मूल चौड़ाई प्रदान करेगा। वे सभी कुछ अलग आकार के हो सकते हैं और आप कम या अधिक तत्वों के साथ ऐसा कर सकते हैं।

पूर्व। (प्रत्येक तत्व में 2 पक्ष हैं इसलिए सीमा, मार्जिन और पैडिंग गुणा 2 हो जाती है)

तो एक तत्व जिसकी चौड़ाई 10px, सीमा 2px, मार्जिन 6px, गद्दी 3px इस तरह दिखाई देगी: 10 + 4 + 12 + 6 = 32

फिर अपने सभी तत्व की कुल चौड़ाई को एक साथ जोड़ें।

Element 1 = 32
Element 2 = 24
Element 3 = 32
Element 4 = 24

इस उदाहरण में "बाहरी" div के लिए चौड़ाई 112 होगी।

.outer {
  /* floats + margins + borders = 270 */
  max-width: 270px;
  margin: auto;
  height: 80px;
  border: 1px;
  border-style: solid;
}

.myFloat {
    /* 3 floats x 50px = 150px */
    width: 50px;
    /* 6 margins x 10px = 60 */
    margin: 10px;
    /* 6 borders x 10px = 60 */
    border: 10px solid #6B6B6B;
    float: left;
    text-align: center;
    height: 40px;
}

<div class="outer">
  <div class="myFloat">Float 1</div>
  <div class="myFloat">Float 2</div>
  <div class="myFloat">Float 3</div>
</div>

Comments

यह वह उत्तर है जिसकी मुझे तलाश थी, धन्यवाद। आप अपनी ज़रूरत के हिसाब से px की गणना कैसे करते हैं? मेरे लिए स्पष्ट नहीं है।

— सिल्वरसर्फर