Containers and divs in CSS - css

Question

Good day,
I'm not new to CSS or DIVs but have been out of touch for long enough. Trying to work out with Containers and nested DIVs but not getting much success in doing what I'm trying to do. Have already searched enough on SO and Goog but, hopefully you can help me.
Here's the representation of what I wish to achieve.
Screenshot of the layout
And here is what I have done so far ..
.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">
<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">
Test
</div>
</div>
The image just wont center, no matter what I do. I believe, somewhere I have set the property to align left or something. Can anyone please point me to the correct direction? Thanks for your help!

Answer 1

I changed your code a little bit, but you'll get idea :
Here is 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>
And here is the 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 2

You missed adding this css property:
.dealsleft {
text-align:center;
}

Answer 3

You can center elements inside a div by using text-align:center; for all the text elements like: h1, p, h2, a etc. To center an img or a div inside another div you can use margin: 0 auto; the auto is the important part for centering the left and right margins.
More info here
i've updated your code snippet.
.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">
<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">
Test
</div>
</div>

Answer 4

I have added background colors for visualization purposes.
* {
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 5

You can get it by using flex below an example as your requirement.
.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>
Here is working fiddle
fiddle

Answer 6

You are probably looking for any of these 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;
}
... or:
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
*/
}