Why I can't center the components horizontally in the div? - html

Question

I have block and inside the blocks, there are three boxes. The CSS is
.blocks {
display: block;
margin: 0 auto;
width: 60%;
height: 350px;
}
.box1, .box2, .box3 {
width: 33.333%;
height: 300px;
vertical-align: top;
display: inline-block;
zoom: 1;
}
In the box, there is an image and a text. I want them centered horizontally.
So I did as
.box1, .box2, .box3 {
width: 33.333%;
height: 300px;
vertical-align: top;
display: inline-block;
zoom: 1;
margin-left: auto;
margin-right: auto;
}
But they are not centered. As shown in the image.
My HTML is
<div class="blocks">
<div class="col-sm-4 col-xs-4 box1" style="background-color:lavender;">
<!-- One image and text here -->
</div>
<div class="col-sm-4 col-xs-4 box2" style="background-color:lavenderblush;">
<!-- One image and text here -->
</div>
<div class="col-sm-4 col-xs-4 box3" style="background-color:lavender;">
<!-- One image and text here -->
</div>
</div>
How to center the components horizontally in the div?

Answer 1

Just give text-align: center; to all the three box.
.box1, .box2, .box3 {
width: 33.333%;
height: 300px;
vertical-align: top;
display: inline-block;
zoom: 1;
text-align: center;
}
Working Fiddle

Answer 2

To center the text, you could use
text-align: center;
To center the images, you need to put a margin on them
.blocks img {
margin: 0 auto;
}

Answer 3

give the imgs a width: 100% and center the text
.blocks {
display: block;
margin: 0 auto;
width: 60%;
height: 350px;
}
.box1,
.box2,
.box3 {
width: 33.333%;
height: 300px;
vertical-align: top;
display: inline-block;
}
.box1,
.box2,
.box3 {
width: 33.333%;
height: 300px;
vertical-align: top;
display: inline-block;
margin-left: auto;
margin-right: auto;
}
img{
width: 100%;
}
h5{
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="blocks">
<div class="col-sm-4 col-xs-4 box1" style="background-color:lavender;">
<!-- One image and text here -->
<img src="http://i.imgur.com/IMiabf0.jpg" alt="" />
<h5>This is Cute Cat</h5>
</div>
<div class="col-sm-4 col-xs-4 box2" style="background-color:lavenderblush;">
<!-- One image and text here -->
<img src="http://i.imgur.com/IMiabf0.jpg" alt="" />
<h5>This is Cute Cat</h5>
</div>
<div class="col-sm-4 col-xs-4 box3" style="background-color:lavender;">
<!-- One image and text here -->
<img src="http://i.imgur.com/IMiabf0.jpg" alt="" />
<h5>This is Cute Cat</h5>
</div>
</div>

Answer 4

The logic to centre align the container is fine, but there are some spacing between those components. hence, all components doesn't fit in blocks.
Adding float:left; to each box will fix the issue.
.blocks {
display: block;
margin: 0 auto;
width: 60%;
height: 350px;
}
.box1, .box2, .box3 {
width: 33.333%;
height: 300px;
vertical-align: top;
display: inline-block;
zoom: 1;
float: left;
}
<div class="blocks">
<div class="col-sm-4 col-xs-4 box1" style="background-color:lavender;">
<img src="pic_mountain.jpg" alt="Mountain View" style="width:100px;height:100px;">
</div>
<div class="col-sm-4 col-xs-4 box2" style="background-color:lavenderblush;">
<img src="pic_mountain.jpg" alt="Mountain View" style="width:100px;height:100px;">
</div>
<div class="col-sm-4 col-xs-4 box3" style="background-color:lavender;">
<img src="pic_mountain.jpg" alt="Mountain View" style="width:100px;height:100px;">
</div>
</div>