我想有3个div对齐在一个容器div，就像这样:
[[LEFT] [CENTER] [RIGHT]]
容器div是100%宽(没有设定宽度)，中心div在调整容器大小后应该保持在中心。
所以我设置:
#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}
但它变成了:
[[LEFT] [CENTER] ]
[RIGHT]
任何建议吗?
当前回答
HTML:
<div id="container" class="blog-pager">
<div id="left">Left</div>
<div id="right">Right</div>
<div id="center">Center</div>
</div>
CSS:
#container{width:98%; }
#left{float:left;}
#center{text-align:center;}
#right{float:right;}
text-align:中心;给予完美的中心对齐。
JSFiddle演示
其他回答
如果你不想改变你的HTML结构，你也可以添加text-align: center;到包装器元素和一个display: inline-block;到居中的元素。
#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;
}
现场演示:http://jsfiddle.net/CH9K8/
以下是当我用图像作为中心元素时，我必须对接受的答案做出的更改:
确保图像包含在div中(在本例中是#center)。如果不是，你将不得不设置显示为block，它似乎是相对于浮动元素之间的空间居中。 确保设置图像和它的容器的大小: #{中心 保证金:0自动; ｝ #center， #center > img { 宽度:100 px; 高度:汽车; ｝
如果左边、中间和右边的div有不同的宽度，你可以这样完成:
#container {
position: relative;
width: 100%;
text-align: center;
}
#left {
position: absolute;
left: 0px;
}
#right {
position: absolute;
right: 0px;
}
#center {
display: inline-block;
}
如果你的中心DIV是文本，你不需要#center CSS。
Float属性实际上并不用于对齐文本。
此属性用于将元素添加到右侧、左侧或中心。
Div > Div{边框:1px纯黑色;} < html > < div > < div风格= "浮动:左”>第一个< / div > < div风格= "浮动:左”>第二< / div > < div风格= "浮动:左”>第三< / div > < div风格= "浮动:对" >第一个< / div > < div风格= "浮动:对" >第二< / div > < div风格= "浮动:对" > 3 < / div > < / div > < / html >
左输出为[First][second][Third]
右输出为[Third][Second][First]
这意味着float => left属性将把你的下一个元素添加到上一个元素的左边，right也是如此
此外，你还必须考虑父元素的宽度，如果子元素的宽度之和超过了父元素的宽度，那么下一个元素将在下一行添加
< > html < div style =教室:100% > < div style =花车:左派;教室:50%第一> < / div > < div style =花车:左派;教室:50% >第二个< / div > < div style = "漂浮:左派;第三教室:50% > < / div > < / div > < / html >
(第一次)(第二次)
(三)
所以你需要考虑所有这些方面来得到完美的结果
用twitter引导:
<p class="pull-left">Left aligned text.</p>
<p class="pull-right">Right aligned text.</p>
<p class="text-center">Center aligned text.</p>
