CSS 对齐
-
中心对齐元素
要将块元素(如<div>)水平居中,请使用margin:auto;设置元素的宽度将阻止它伸展到其容器的边缘。然后元素将占用指定的宽度,剩余的空间将在两个边距之间平均分配:
尝试一下.center { margin: auto; width: 60%; border: 3px solid #73AD21; padding: 10px; }
注意:如果width属性未设置(或设置为100%),则中心对齐无效。
-
居中对齐文字
要将文本居中放置在元素中,请使用text-align:center;
尝试一下.center { text-align: center; border: 3px solid green; }
-
图像居中
要使图像居中,请将左右边距设置为auto并使其成为block元素:
尝试一下img { display: block; margin-left: auto; margin-right: auto; }
-
左右对齐 - 使用position
对齐元素的一种方法是使用position:absolute;:
尝试一下.right { position: absolute; right: 0px; width: 300px; border: 3px solid #73AD21; padding: 10px; }
-
左右对齐 - 使用float
对齐元素的另一种方法是使用float属性:
尝试一下.right { float: right; width: 300px; border: 3px solid #73AD21; padding: 10px; }
注意:如果元素高于包含它的元素,并且它被浮动,它将溢出其容器外部。您可以使用“clearfix”hack来解决此问题(请参阅下面的示例)。
-
清除Hack
然后我们可以添加overflow:auto;到包含元素来解决这个问题:
尝试一下div { border: 3px solid #4CAF50; padding: 5px; } .img1 { float: right; } .clearfix { overflow: auto; } .img2 { float: right; }
-
-
垂直居中 - 使用line-height
另一个技巧是使用line-height具有等于该height属性的值的属性。
尝试一下.center { padding: 70px 0; border: 3px solid green; }
-
垂直居中 - 使用position和transform
如果padding和line-height不是选项,第三种解决方案是使用position和transform属性:
尝试一下.center { padding: 70px 0; border: 3px solid green; }