html怎么设置垂直居中,Html如何设置元素垂直居中?

1.单行文本是通过设置父元素的 height 和 line-height 高度一致来完成的,其中height是指元素的高度, line-height 是指行间距。

案例:

写一个我是单行文本,我想垂直居中

效果如图:

html怎么设置垂直居中,Html如何设置元素垂直居中?

2.在中加入CSS样式

div{

height: 200px;

line-height:200px;

background: #3fc;

}

结果如图:

html怎么设置垂直居中,Html如何设置元素垂直居中?

3.父元素的高度确定,table标签包裹然后设置vertical-align:middle

案例:

写三个

我是多行文本1,我想垂直居中

我是多行文本2,我想垂直居中

我是多行文本3,我想垂直居中

效果如图:

html怎么设置垂直居中,Html如何设置元素垂直居中?

4.table(因为td 标签默认情况下就默认设置了 vertical-align 为 middle。所以不用重新再写 vertical-align:middle)标签包裹代码设置和效果图如下:

html怎么设置垂直居中,Html如何设置元素垂直居中?

html怎么设置垂直居中,Html如何设置元素垂直居中?

"

html怎么设置垂直居中,Html如何设置元素垂直居中?

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

发表评论

登录后才能评论