Как использовать float и все еще иметь дочерний div внутри родительского div?

Question

Я хочу поместить три изображения в центр страницы. В следующем коде, когда я использую float, изображение выпрыгивает из родительского div с классом «centered». Есть ли способ сохранить дочерний div внутри родительского 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; 
} 

Answer 1

вы должны добавить SUDO элемента только после .centered DIV чтобы очистить поплавок после него.

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

Answer 2

Если вы хотите центр изображения, придать ему ширину и левый и правый край auto:

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

<img />

Если вы хотите, чтобы центрировать изображение внутри 1500px широкого div.centered с зеленой границей 3px, сделать то же самое:

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>