0
点赞
收藏
分享

微信扫一扫

CSS如何实现水平和垂直对齐

天使魔鬼 2022-02-14 阅读 69
csshtmlcss3

居中对齐元素

要使块元素(例如 <div> )水平居中,请使用 margin: auto;。

设置元素的宽度将防止其延伸到容器的边缘。

然后,元素将占用指定的宽度,剩余空间将在两个外边距之间平均分配:

 注意:如果未设置 width 属性(或将其设置为 100%),则居中对齐无效。

居中对齐文本

如果仅需在元素内居中文本,请使用 text-align: center;:

 

居中对齐图像

如需居中图像,请将左右外边距设置为 auto,并将其设置为块元素:

 

左和右对齐 - 使用 position

对齐元素的一种方法是使用 position: absolute;

 

左和右对齐 - 使用 float

对齐元素的另一种方法是使用 float 属性:

 注意:如果一个元素比包含它的元素高,并且它是浮动的,它将溢出其容器。可以使用 clearfix hack 来解决此问题(请看下面的例子)。

 

垂直对齐 - 使用 padding

有很多方法可以在 CSS 中垂直对齐元素。一个简单的解决方案是使用上下内边距:

如需同时垂直和水平对齐,请使用 padding 和 text-align: center;:

  

垂直对齐 - 使用 line-height

另一个技巧是使用其值等于 height 属性值的 line-height 属性:

 

垂直对齐 - 使用 position 和 transform

如果不使用 padding 和 line-height,则另一种解决方案是使用 position 和 transform 属性:

 

 

垂直对齐 - 使用 Flexbox

还可以使用 flexbox 将内容居中。注意,IE10 以及更早的版本不支持 flexbox:

 

 

举报

相关推荐

0 条评论