CSS - Why wont this div take width of the floated children?

Question

I have a grid with floated images. I want to have the images be centered in the page, so I add a inner div which in a perfect world would take the width of floated images inside and have that guy be centered in the page.

but this is css!

Unfortunately for some reason the div inherits the entire width of parent, thus making it impossible to center the elements inside.

Here is how the output with the inner div selected:

This is the css I'm using:

.image-grid{

    padding: 20px;
}


.image-grid__inner{

    overflow: hidden;

}
.image-grid__image{
    text-align: center;  
    display: block;

    position: relative;

    -webkit-backface-visibility: hidden;

    width:  180px;
    height: 120px;

    float: left;
    margin: 10px;

    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

    transition: padding 0.3s ease, transform 0.2s ease-out, box-shadow 0.5s;
}


.image-grid__image img{
    display: inline-block;

    width:  180px;
    height: 120px;

    transition: width 0.3s ease, height 0.3s ease;
}

Milion thanks for any help here.

Answer 1

There are various solutions to your problem.

Fixed size images/ Non responsive css styling

Here you could add the image in an element which usually takes the size of its content only like display: inline-block. Elements that I can think of currently are <p></p> and <span></span>. You can then make the parent of these elements have css text-align: center which makes all the inline-block elements center aligned

Responsive image styling

In case you simply want to add images without the parent element, you can set responsive width to the images instead of fixed sizing. By responsive I mean using percentages. You don't need to use float: left styling either

Flexbox

Even I am new to flexbox but I did create product grid using it. @Syden's answer is sufficient to explain that.

Answer 2

Remove float and use display: inline-block
Add text-align: center to the main holder div.
And remove the inner container.

.image-grid {
  padding: 20px;
  overflow: hidden;
  text-align: center;
}

.image-grid__image {
  text-align: center;
  position: relative;
  -webkit-backface-visibility: hidden;
  width: 180px;
  height: 120px;
  /*float: left;*/
  display: inline-block;
  margin: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: padding 0.3s ease, transform 0.2s ease-out, box-shadow 0.5s;
}

.image-grid__image img {
  display: inline-block;
  width: 180px;
  height: 120px;
  transition: width 0.3s ease, height 0.3s ease;
}

<div class="image-grid">

  <div class="image-grid__image">
    <img src="https://placehold.it/180x120/fff/000">
  </div>
  <div class="image-grid__image">
    <img src="https://placehold.it/180x120/fff/000">
  </div>
  <div class="image-grid__image">
    <img src="https://placehold.it/180x120/fff/000">
  </div>

</div>

Answer 3

If the space is not enough for the thumbnail it will collpase, if you wish to center row-based thumbnails, while preserving it's centering when resizing container, I'd suggest you consider this simple flexbox example:

• Remove/comment float:left; from .image-grid__image
• Add display: flex; flex-flow: row wrap; justify-content: center; to .image-grid__inner

External Fiddle to test resizing

And snippet below:

.image-grid {
  padding: 20px;
  /* just for reference */
  border: 1px solid lightgray;
}

.image-grid__inner {
  overflow: hidden;
  /* new */
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.image-grid__image {
  text-align: center;
  display: block;
  position: relative;
  -webkit-backface-visibility: hidden;
  width: 180px;
  height: 120px;
  /*float: left;*/
  margin: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: padding 0.3s ease, transform 0.2s ease-out, box-shadow 0.5s;
}

.image-grid__image img {
  display: inline-block;
  width: 180px;
  height: 120px;
  transition: width 0.3s ease, height 0.3s ease;
}

<div class="image-grid">
  <div class="image-grid__inner">
    <div class="image-grid__image"></div>
    <div class="image-grid__image"></div>
    <div class="image-grid__image"></div>
    <div class="image-grid__image"></div>
    <div class="image-grid__image"></div>
  </div>
</div>