Smithy Smithy - 7 days ago 5
CSS Question

How to center multiple items/images inside a div

I am having issues with centering these three images inside a container. I am using Bootstrap but due to some overlay content that will be added later I would like to avoid some of its grid system, and center these three images independent of that. Here's the pen to demonstrate the current state: http://codepen.io/anon/pen/yVovqW

.container {
background-color: lightgreen;
}

.images {
padding: 10px;
}

.about__images {
max-width: 900px;
margin: 0 auto;
text-align: center;
//margin-top: 60px;
}

.about__inner img {
max-width: 100%;
//margin-right: 20px;
}

.about__inner {
margin-right: 20px;
position: relative;
width: 250px;
float: left;
}

<div class="container images">
<div class="about__images">
<div class="about__inner">
<img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97300&w=400&h=300" alt="">

</div>
<div class="about__inner">
<img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97300&w=400&h=300" alt="">

</div>
<div class="about__inner">
<img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97300&w=400&h=300" alt="">

</div>
</div>
</div>

Answer

Change the float left; for display:inline-block; in the .about__inner class and you should be good to go.

Comments