How to center images that are side by side in div?

Question

I was wondering how to center two images that are side by side? Here is my code:

div#allen {
float: left;
padding: 0px 27px 0px 0px;
}

div#buckshill {
float: left;
padding: 0px 27px 0px 0px;
}

div#harvest {
float: left;
padding: 0px 27px 0px 0px;
}

I tried putting a div around all images called "div id="floorplans" and used margin:0 auto but that didn't do the trick

Website: http://www.meridianridgect.com/floor-plans/

The first rule of centering is *"Don't float the items to be centered"* — Paulie_D, Aug 01 '16 at 15:33
@Paulie_D I thought the first rule of centering was don't talk about centering? — j08691, Aug 01 '16 at 15:34
@j08691 *Shhhhhh!*...that's the second rule. The third is "Search SO for centering questions FIRST before asking"...looks like the OP broke all three. — Paulie_D, Aug 01 '16 at 15:35
@paulie_D ha! I tried to use "display:inline-block" instead of float: left but no luck there I want it to be centered horizontally — sararaveis, Aug 01 '16 at 15:36
For all your centering needs - http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div?rq=1 — Paulie_D, Aug 01 '16 at 15:37
@paulie_D what i need isn't really there - i have looked through a bunch of forums already and none have helped me with my situation — sararaveis, Aug 01 '16 at 15:51

score 0 · Answer 1 · answered Aug 01 '16 at 16:02

Here is an example for you that should work. If you change the width of the inner div to whatever width of the objects you need to center, it should center anything.

https://jsfiddle.net/qkd5cm6a/

The code to center it:

#inner {
  width: 400px;
  margin: 0 auto;
}

How to center images that are side by side in div?

1 Answers1