CODEWITHSUNDEEP
css
Smithy
Smithy

Reputation: 847

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>

Upvotes: 0

Views: 24

Answers (2)

Amin Jafari
Amin Jafari

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

palako
palako

Reputation: 3490

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

Upvotes: 2

Related Questions