码迷,mamicode.com
首页 > Web开发 > 详细

css 水平垂直居中

时间:2018-08-06 15:20:33      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:code   line   css   color   图片   类型   垂直居中   修改   添加   

 

水平居中

行内或类行内元素(比如文本和链接)

在块级父容器中让行内元素居中,只需使用 text-align: center;

这种方法可以让 styple="display:inline/inline-block/inline-table/inline/flex ”等类型的元素实现居中。

块级元素

让块级元素居中的方法就是设置 margin-left 和 margin-right 为 auto或 margin:0 auto(前提是已经为元素设置了适当的 width 宽度,否则块级元素的宽度会被拉伸为父级容器的宽度)。

多个块级元素

如果要让多个块级元素在同一水平线上居中,那么可以修改它们的 display 值。这里有两个示例,其中一个使用了 inline-block 的显示方式,另一个使用了 flexbox 的显示方式:

如果你想让多个垂直堆栈的块元素,那么仍然可以通过设置 margin-left 和 margin-right 为 auto 来实现:

 

垂直居中

使用 CSS 实现垂直居中需要一些技巧。

行内或类行内元素(比如文本和链接)

单行

对于单行行内或者文本元素,只需为它们添加等值的 padding-top 和 padding-bottom 就可以实现垂直居中:

技术分享图片技术分享图片

技术分享图片

技术分享图片

技术分享图片

 

css 水平垂直居中

标签:code   line   css   color   图片   类型   垂直居中   修改   添加   

原文地址:https://www.cnblogs.com/Demonfeatuing/p/9430196.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!