I have a container of various width, and various number of boxes float inside it. All the boxes have same width
and height
.
This is a demonstration. https://jsfiddle.net/kghvmjb6/1/
I am looking for pure CSS solution if possible. Otherwise pure javascript (no jQuery) and CSS solutions are fine.
This example works fine with one line of floating boxes but fail with multiple lines, which is not I want. https://codepen.io/alexandredees/pen/ojaFr
Instead of using float
left
, use display
inline-block
and in the parent div
add text-align
center
, that will center the boxes in the container
HTML
<div class="container">
<div class="">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="clear"></div>
</div>
</div>
CSS
.container {
border: 1px solid red;
width: 480px; text-align:center;
}
.container.wider {
width: 530px;
}
.box {
float: none;
width: 80px;
height: 80px;
margin: 10px;
background-color: #ddd;
display:inline-block;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.