我想在容器div中对齐3个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]
有小费吗?
#1楼
如果您不想更改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;
}
#2楼
这是当我以图像为中心元素时必须对接受的答案进行的更改:
确保图像包含在div中(本例中为#center )。 如果不是,则必须将display设置为block ,并且它似乎相对于浮动元素之间的空间居中。
确保设置图像及其容器二者的大小:#center { margin: 0 auto; } #center, #center > img { width: 100px; height: auto; }
#3楼
我喜欢我的杠铃紧凑而充满活力。 这是针对CSS 3和HTML 5的
首先,将“宽度”设置为100px是有限制的。 不要这样
其次,将容器的宽度设置为100%可以正常工作,直到谈论它是整个应用程序的页眉/页脚栏,例如导航栏或信用/版权栏。 使用right: 0; 而不是那种情况。
您正在使用id(哈希#container #left , #container #left等)而不是类( .container , .left等),这很好,除非您想在代码中的其他地方重复样式样式。 我会考虑使用类代替。
对于HTML,无需将顺序交换为:左,中和右。 display: inline-block; 解决此问题,将您的代码返回到更整洁且逻辑上又有序的位置。
最后,您需要清除所有浮动内容,以免与将来的
总结一下:
HTML:
CSS:
.container {right: 0; text-align: center;}
.container .left, .container .center, .container .right { display: inline-block; }
.container .left { float: left; }
.container .center { margin: 0 auto; }
.container .right { float: right; }
.clear { clear: both; }
如果使用HAML和SASS则有加分;)
HAML:
.container
.left
.center
.right
.clear
SASS:
.container {
right: 0;
text-align: center;
.left, .center, .right { display: inline-block; }
.left { float: left; }
.center { margin: 0 auto; }
.right { float: right; }
.clear { clear: both; }
}
#4楼
您已正确完成操作,只需要清除浮动即可。 只需添加
overflow: auto;
到您的容器类。
#5楼
使用该CSS,将您的div放置为这样(浮点数优先):
PS您也可以向右浮动,然后向左浮动,然后居中。 重要的是浮子位于“主”中心部分之前。
PPS您通常希望在#container内部最后一个代码段: