Reputation: 847
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>
Upvotes: 0
Views: 24
Reputation: 7207
I was gonna suggest display:flex;
but after playing with the code a bit I found out that you can fix it if you just change this part of the code: DEMO
.about__inner {
margin-right: 20px;
position: relative;
width: 250px;
display:inline-block; //float: left;
}
Upvotes: 1
Reputation: 3490
Change the float left;
for display:inline-block;
in the .about__inner
class and you should be good to go.
Upvotes: 2