文章目录
CSS 布局 - 水平和垂直对齐
居中对齐元素
要水平居中块元素(如 <div>
),请使用 margin: auto;
设置元素的宽度将防止其延伸到容器的边缘。
然后,元素将占据指定的宽度,剩余空间将在两个边距之间平均分配:
此 div 元素居中。
示例
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
注意:如果未设置 width 属性(或设置为 100%),则居中对齐无效。
居中对齐文本
要仅将元素内的文本居中,请使用 text-align: center;
示例
.center {
text-align: center;
border: 3px solid green;
}
居中图像
要居中图像,请将左右边距设置为自动,并将其设为块元素:
示例
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
左右对齐 - 使用位置
对齐元素的一种方法是使用 position: absolute;:
示例
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
注意:绝对定位元素会从正常流中移除,并且可以与元素重叠。
左对齐和右对齐 - 使用浮动
对齐元素的另一种方法是使用浮动属性:
示例
.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
clearfix 技巧
注意:如果元素比包含它的元素高,并且它是浮动的,它将溢出其容器。您可以使用“clearfix 技巧”来修复此问题(参见下面的示例)。
然后我们可以将 clearfix 技巧添加到包含元素以解决此问题:
示例
.clearfix::after {
content: "";
clear: both;
display: table;
}
垂直居中 - 使用填充
在 CSS 中,有很多方法可以将元素垂直居中。一个简单的解决方案是使用顶部和底部填充:
示例
.center {
padding: 70px 0;
border: 3px solid green;
}
要垂直和水平居中,请使用 padding 和 text-align: center:
示例
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}
垂直居中 - 使用 line-height
另一个技巧是使用 line-height 属性,其值等于 height 属性:
示例
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
/* 如果文本有多行,请添加以下内容:*/
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
垂直居中 - 使用 position 和 transform
如果 padding 和 line-height 不是选项,另一个解决方案是使用定位和 transform 属性:
示例
.center {
height: 200px;
position:relative;
border: 3px solid green;
}
.center p {
margin: 0;
position:absolute;
top: 50%;
left: 50%;
transform:translate(-50%, -50%);
}
提示:您将在我们的 2D Transforms 章节中了解有关 transform 属性的更多信息。
垂直居中 - 使用 Flexbox
您还可以使用 Flexbox 来居中。请注意,IE10 及更早版本不支持 Flexbox:
示例
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid green;
}
总结
本文介绍了的CSS 布局水平和垂直对齐使用,如有问题欢迎私信和评论