阅读 87

html表格文字居中怎么设置(html表单注册页面)

css水平与垂直居中布局要求子元素在父元素中水平方向和垂直方向上都处于居中位置,并且子元素和父元素的宽度和高度都是可变的。

水平垂直居中布局通用

方案一:使用inline-block和text-align,table-cell和vertical-align实现完全据中国布局。

设置.parent{display:table-cell;vertical-align:center;},将父元素上设置为table-cell元素,在table-cell中设置垂直居中,从而实现垂直方向上的居中。

设置.parent{text-align:center;}和.child{display:inline-block;},将父元素中的子元素设置为水平居中,再将子元素设置为inline-block元素(宽度为内容宽度,可设置宽高),使得text-align属性的设置对子元素也起作用,从而实现水平居中对齐。

将以上两条css合并之后,就可以完整实现水平垂直居中对齐。

评价:兼容性好,代码量稍大。

方案二:使用absolute和transform实现水平垂直居中对齐

设置.parent{position:relative;},将父元素设置为相对定位元素,作为绝对定位元素的参照物。

设置.child{position:absolute;top:50%;left:50%;transform(-50%,-50%);},将子元素设置为相对于父元素的绝对定位元素,并将其定位到父元素的中间位置,通过设置transform属性,修正使用left和top定位出现的错误,从而实现水平垂直居中对齐。

评价:绝对定位元素脱离文档流,不会对后续元素造成影响;但是transform属于css3标准定义的属性,兼容性存在问题。

方案三:使用flex,justify-content和items-align实现水平垂直居中对齐

设置.parent{display:flex;justify-content:center;items-align:center;},该方案看起来比较简单,只需要将父元素设置为flex弹性元素,同时使用弹性元素的justify-content和items-align属性设置子元素在垂直和水平方向上的对齐,最终实现水平和垂直方向的居中。

评价:该方案只需要设置父元素,不需要设置子元素的样式。但是在兼容性上需要补充。

文章分类
百科问答
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐