Container und divs in CSS

Question

Guten Tag, Ich bin nicht neu zu CSS oder DIVs, aber haben lange genug aus dem Kontakt. Ich versuche, mit Containern und verschachtelten DIVs zu trainieren, aber ich bekomme nicht viel Erfolg bei dem, was ich versuche zu tun. Hab schon genug auf SO und Goog gesucht aber hoffentlich kannst du mir helfen.

Hier ist die Darstellung dessen, was ich erreichen möchte.

Screenshot of the layout

Und hier ist, was ich bisher ..

.dealsglobal { 
 
    width: 45%; 
 
    display: inline-block; 
 
    float: left; 
 
    margin-right:20px; 
 
    height: auto; 
 
    overflow: auto; 
 
} 
 

 
.dealsglobal h2 { 
 
    margin-left: 10px; 
 
} 
 

 
.dealsindia { 
 
    width: 45%; 
 
    height: auto; 
 
    overflow: auto; 
 
} 
 

 
.dealsindia h2 { 
 
    margin-left: 10px; 
 
} 
 

 
.dealsleft { 
 
    margin: 0px 25px 10px 0px; 
 
    padding: 5px; 
 
    border: 1px solid #ccc; 
 
    height: auto; 
 
    position: relative; 
 
    width: 40%; 
 
    float: left; 
 
    display: inline-block; 
 
    overflow: auto; 
 
} 
 

 
.dealsleft img { 
 
    border: 1px solid #ddd; 
 
    background: #fff; 
 
    border-radius: 4px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    width: 100px; 
 
} 
 

 
.dealsright { 
 
    margin-bottom: 10px; 
 
    padding: 5px; 
 
    border: 1px solid #ccc; 
 
    height: auto; 
 
    position: relative; 
 
    width: 40%; 
 
    display: inline-block; 
 
    overflow: auto; 
 
}

<div class="dealsglobal"> 
 
<h2>Global Coupons</h2> 
 
    <div class="dealsleft"> 
 
\t <img src="thumb-heavengifts.jpg" alt="HeavenGifts.com Web Store" align="middle" /> 
 
    </div> 
 
    <div class="dealsright"> 
 
    Test 
 
    </div> 
 
</div> 
 

 
<div class="dealsindia"> 
 
<h2>Indian Coupons</h2> 
 
    <div class="dealsleft"> 
 
    Test 
 
    </div> 
 
    <div class="dealsright"> 
 
\t Test 
 
    </div> 
 
</div>

Das Bild, nur wont Zentrum, egal was ich tun getan haben. Ich glaube, irgendwo habe ich die Eigenschaft eingestellt, links oder etwas auszurichten. Kann mir bitte jemand in die richtige Richtung zeigen? Danke für Ihre Hilfe!

Answer 1

Sie verfehlten das Hinzufügen dieser CSS-Eigenschaft:

.dealsleft { 
    text-align:center; 
} 

Answer 2

Sie sind wahrscheinlich für jede dieser 2 suchen:

parentSelector { 
    display: block; /* can also be an inline-block, with set width */ 
    text-align: center; 
} 
childSelector { 
    width: 60%; /* generic. Change it */ 
    display: block; 
    margin: 0 auto; 
} 

... oder:

parentSelector { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
} 
childSelector { 
    max-width: 60%; /* optional. Change it. 
         * You don't need to set width here and, 
         * it's OK not to limit max-width, either 
         */ 
} 

Answer 3

Ich änderte Ihre Code ein wenig, aber Sie werden Idee bekommen:

Hier html:

<div class="container"> 
    <div class="left"> 
    <h2 class="inner-text">title</h2> 
    <div class="image"> 
     <img src="http://via.placeholder.com/350x150" /> 
    </div> 
    <h5 class="inner-text">description</h5> 
    </div> 

    <div class="right"> 
    <h2 class="inner-text">title</h2> 
    <div class="image"> 
     <img src="http://via.placeholder.com/350x150" /> 
    </div> 
    <h5 class="inner-text">description</h5> 
    </div> 
    <div style="clear: both" /> 
</div> 

Und hier ist die CSS:

.container{ 
    width: 98%; 
    border: 2px solid #f00; 
    padding: 10px; 
} 

.left { 
    width: 47%; 
    float: left; 
    margin: 0 1% 0 1%; 
    border: 1px solid green; 
} 


.right { 
    width: 47%; 
    float: left; 
    margin: 0 1% 0 1%; 
    border: 1px solid green; 
} 

.inner-text{ 
    text-align:center; 
} 

.image{ 
    padding: 20px; 
} 

.image img{ 
    max-width: 100%; 
} 

Check here jsfiddle.

Answer 4

Sie Elemente in einem div unter Verwendung text-align:center; für alle Textelemente wie Zentrieren können: h1, p, h2, a etc Um eine img oder eine div innerhalb einer anderen div zu zentrieren, können Sie margin: 0 auto; die auto verwenden ist der wichtige Teil zur Zentrierung der Ränder left und right.

Mehr Infos here

i Ihr Code-Snippet aktualisiert haben.

.dealsglobal { 
 
    width: 45%; 
 
    display: inline-block; 
 
    float: left; 
 
    margin-right:20px; 
 
    height: auto; 
 
    overflow: auto; 
 
} 
 

 
.dealsglobal h2 { 
 
    margin-left: 10px; 
 
} 
 

 
.dealsindia { 
 
    width: 45%; 
 
    height: auto; 
 
    overflow: auto; 
 
} 
 

 
.dealsindia h2 { 
 
    margin-left: 10px; 
 
} 
 

 
.dealsleft { 
 
    margin: 0px 25px 10px 0px; 
 
    padding: 5px; 
 
    border: 1px solid #ccc; 
 
    height: auto; 
 
    position: relative; 
 
    width: 40%; 
 
    float: left; 
 
    display: inline-block; 
 
    overflow: auto; 
 
    text-align: center; 
 
} 
 

 
.dealsleft img { 
 
    border: 1px solid #ddd; 
 
    background: #fff; 
 
    border-radius: 4px; 
 
    margin: 5px auto; 
 
    width: 100px; 
 
} 
 

 
.dealsright { 
 
    margin-bottom: 10px; 
 
    padding: 5px; 
 
    border: 1px solid #ccc; 
 
    height: auto; 
 
    position: relative; 
 
    width: 40%; 
 
    display: inline-block; 
 
    overflow: auto; 
 
    text-align: center; 
 
}

<div class="dealsglobal"> 
 
<h2>Global Coupons</h2> 
 
    <div class="dealsleft"> 
 
\t <img src="thumb-heavengifts.jpg" alt="HeavenGifts.com Web Store" align="middle" /> 
 
    </div> 
 
    <div class="dealsright"> 
 
    Test 
 
    </div> 
 
</div> 
 

 
<div class="dealsindia"> 
 
<h2>Indian Coupons</h2> 
 
    <div class="dealsleft"> 
 
    Test 
 
    </div> 
 
    <div class="dealsright"> 
 
\t Test 
 
    </div> 
 
</div>

Answer 5

Ich habe zur Visualisierung Hintergrundfarben hinzugefügt.

* { 
 
    box-sizing: border-box; 
 
} 
 

 
#container { 
 
    width: 100%; 
 
    padding: 10px; 
 
    background-color: red; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
.subcontainer-outer { 
 
    width: 49%; 
 
    background-color: green; 
 
} 
 

 
.subcontainer { 
 
    width: 100%; 
 
    background-color: blue; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
.content { 
 
    width: 45%; 
 
    text-align: center; 
 
    background-color: yellow; 
 
}

<h3>Container</h3> 
 
<div id="container"> 
 
    <div class="subcontainer-outer"> 
 
    <h4>Sub container 1</h4> 
 
    <div class="subcontainer"> 
 
     <div class="content"> 
 
     <img src="http://placehold.it/100" /> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
     </div> 
 
     <div class="content"> 
 
     <img src="http://placehold.it/100" /> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="subcontainer-outer"> 
 
    <h4>Sub container 2</h4> 
 
    <div class="subcontainer"> 
 
     <div class="content"> 
 
     <img src="http://placehold.it/100" /> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
     </div> 
 
     <div class="content"> 
 
     <img src="http://placehold.it/100" /> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 6

Sie können es, indem sie als Ihre Anforderung mit flex unten ein Beispiel zu bekommen.

.dealsglobal { 
 
    width: 48%; 
 
    margin-right: 10px; 
 
    height: auto; 
 
    float: left; 
 
} 
 

 
.flex { 
 
    display: flex; 
 
    justify-content: flex-start; 
 
    align-items: center; 
 
    flex-flow: row nowrap; 
 
    border: 1px solid red; 
 
    padding: 10px; 
 
} 
 

 
.dealsglobal h2 { 
 
    margin-left: 10px; 
 
} 
 

 
.dealsindia h2 { 
 
    margin-left: 10px; 
 
} 
 

 
.dealsleft { 
 
    margin: 0px 25px 10px 0px; 
 
    padding: 5px; 
 
    border: 1px solid #ccc; 
 
    flex: 1 0 0; 
 
    align-self: flex-start; 
 
} 
 

 
.dealsleft img { 
 
    border: 1px solid #ddd; 
 
    background: #fff; 
 
    border-radius: 4px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    width: 100%; 
 
} 
 

 
.dealsright { 
 
    margin-bottom: 10px; 
 
    padding: 5px; 
 
    border: 1px solid #ccc; 
 
    overflow: auto; 
 
    flex: 1 0 0; 
 
    align-self: flex-start; 
 
}

<div class="dealsglobal"> 
 
    <h2>Global Coupons</h2> 
 
    <div class="flex"> 
 
    <div class="dealsleft"> 
 
     <img src="http://lorempixel.com/400/200/sports/" alt="HeavenGifts.com Web Store" align="middle" /> 
 
    </div> 
 
    <div class="dealsright"> 
 
     Test 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="dealsglobal"> 
 
    <h2>Global Coupons</h2> 
 
    <div class="flex"> 
 
    <div class="dealsleft"> 
 
     <img src="http://lorempixel.com/400/200/sports/" alt="HeavenGifts.com Web Store" align="middle" /> 
 
    </div> 
 
    <div class="dealsright"> 
 
     Test 
 
    </div> 
 
    </div> 
 
</div>

Hier Geige

fiddle