How to align 3 divs (left/center/right) inside another div?
I want to have 3 divs aligned inside a container div, something like this:
[[LEFT] [CENTER] [RIGHT]]
Container div is 100% wide (no set width), and center div should remain in center after resizing the container.
So I set:
#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}
But it becomes:
[[LEFT] [CENTER] ]
[RIGHT]
Any tips?
With that CSS, put your divs like so (floats first):
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>
PS You could also float right, then left, then center. The important thing is that the floats come before the "main" center section.
PPS You often want last inside #container this snippet: <div style="clear:both;"></div> which will extend #container vertically to contain both side floats instead of taking its height only from #center and possibly allowing the sides to protrude out the bottom.
If you do not want to change your HTML structure you can also do by adding text-align: center; to the wrapper element and a display: inline-block; to the centered element.
#container {
width:100%;
text-align:center;
}
#left {
float:left;
width:100px;
}
#center {
display: inline-block;
margin:0 auto;
width:100px;
}
#right {
float:right;
width:100px;
}
Live Demo: http://jsfiddle.net/CH9K8/
Aligning Three Divs Horizontally Using Flexbox
Here is a CSS3 method for aligning divs horizontally inside another div.
#container {
display: flex; /* establish flex container */
flex-direction: row; /* default value; can be omitted */
flex-wrap: nowrap; /* default value; can be omitted */
justify-content: space-between; /* switched from default (flex-start, see below) */
background-color: lightyellow;
}
#container > div {
width: 100px;
height: 100px;
border: 2px dashed red;
}<div id="container">
<div></div>
<div></div>
<div></div>
</div>上一篇: 如何在彩盒中垂直对齐文本？