How to use float and still have the child div inside the parent div?

Question

I want to put three images at the center of a page. In the following code, when I use float, the image jumps out of the parent div with class "centered". Is there any way that I can keep the child div inside the parent div?

HTML:

<div class="centered">
  <div id="M">
    <img src="images/M.png">
    <img src="images/M.png">
    <img src="images/M.png">
  </div>
</div>

CSS:

.centered {
    margin-left: auto;
    margin-right: auto;
    border: 3px solid #73AD21;
    width: 1500px;
}

.centered img {
    display: block;
}

#M {
    float:left;
}

Possible duplicate of [Using :after to clear floating elements](http://stackoverflow.com/questions/10699343/using-after-to-clear-floating-elements) — A. Wolff, Feb 06 '16 at 13:33
I've updated your question because in your original question you said _I want to put **an image** at the center of the page_ and then your code below included a single image. Centering a row of 3 pictures side by side is quite a different question from centering a single image. — Rounin - Standing with Ukraine, Feb 06 '16 at 14:08

Peter Wilson · Accepted Answer · 2016-02-07T10:16:49.333

3

you have to add sudo element just after your .centered div to clear the float after it.

.centered:after{
   content: "";
   display:table;
   clear:both;
}

edited Feb 07 '16 at 10:16

answered Feb 06 '16 at 13:44

Peter Wilson

3,938
3
31
55

score 1 · Answer 2 · answered Feb 06 '16 at 13:37

If you want to center the image, give it a width and a left and right margin of auto:

img {
display: block;
width: 100px;
height: 100px;
margin: 12px auto;
background-color: rgb(255,0,0);
}

<img />

If you want to center the image inside a 1500px wide div.centered with a 3px green border, do the same:

img {
display: block;
width: 100px;
height: 100px;
margin: 12px auto;
background-color: rgb(255,0,0);
}

.centered {
    margin: 0 auto;
    border: 3px solid #73AD21;
    width: 1500px;
}

<div class="centered">
<img />
</div>

How to use float and still have the child div inside the parent div?

2 Answers2