容器和div中的CSS

Question

美好的一天， 我不是新來的CSS或DIV，但已經失去了足夠長的時間。試圖解決容器和嵌套的DIV，但沒有取得太大的成功做我想做的事情。已經在SO和Goog上搜索了足夠的內容，但希望你能幫助我。

下面是我希望實現的內容的表示形式。

Screenshot of the layout

這裏是我迄今所做..

.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>

的圖像只是不會市中心，無論我做什麼。我相信，在某個地方，我已經設置了財產左對齊或什麼的。任何人都可以請我指出正確的方向？謝謝你的幫助！

Answer 1

你錯過添加此CSS屬性：

.dealsleft { 
    text-align:center; 
} 

Answer 2

您可能正在尋找任何這些2：

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; 
} 

...或：

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

我改變了你代碼有點，但你會明白：

這裏是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> 

這裏是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

您可以通過使用text-align:center;所有文字元素，如居中div內的元素：h1, p, h2, a等要將img或div居中放置在另一個div中，您可以使用margin: 0 auto;的auto是將left和right頁邊距居中的重要部分。

更多信息here

我已經更新您的代碼段。

.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

我添加背景顏色可視化的目的。

* { 
 
    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

您可以通過下面的例子根據您的要求使用flex得到它。

.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>

這裏正在撥弄

fiddle