css页面如何整体居中代码(Web前端CSS轻松搞定标签)

作者:蔷薇Nina

原文:https://www.cnblogs.com/wcwnina/p/11297630.html

在CSS里,标签位置居中一直是困扰Web前端的难题。在本文中,我对这类问题进行了探究和给出了几点建议,供读者参考。

1 行内标签

1.1 水平居中

在父级标签中使用 text-align: center

css页面如何整体居中代码(Web前端CSS轻松搞定标签)(1)

效果:

css页面如何整体居中代码(Web前端CSS轻松搞定标签)(2)

1.2 垂直居中

如果是单行,则为该标签设置行高line-height)且与其父级标签 height 相等即可。

css页面如何整体居中代码(Web前端CSS轻松搞定标签)(3)

效果:

css页面如何整体居中代码(Web前端CSS轻松搞定标签)(4)

如果是多行,稍微有点麻烦,需要在该标签设置 display: table-cell vertical-align: middle,在其父级标签设置 display: table

css页面如何整体居中代码(Web前端CSS轻松搞定标签)(5)

效果:

css页面如何整体居中代码(Web前端CSS轻松搞定标签)(6)

2 块标签

2.1 水平居中

方法一:在父级标签中使用 flex 弹性盒子。

css页面如何整体居中代码(Web前端CSS轻松搞定标签)(7)

效果:

css页面如何整体居中代码(Web前端CSS轻松搞定标签)(8)

方法二:在该标签中使用 margin 属性。

css页面如何整体居中代码(Web前端CSS轻松搞定标签)(9)

效果:

css页面如何整体居中代码(Web前端CSS轻松搞定标签)(10)

2.2 垂直居中

在父级标签中使用 flex 弹性盒子。

css页面如何整体居中代码(Web前端CSS轻松搞定标签)(11)

效果:

css页面如何整体居中代码(Web前端CSS轻松搞定标签)(12)

总结:对于行内标签居中,优先考虑文本对齐(text-align)和显示单元格(table-cell);对于块标签居中,优先考虑显示弹性盒子(flex)。

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页