建设网站策划,织梦的官方网站,WordPress评论楼层,企业官网入口简单方法#xff1a;
1.先用text-align: center;将文字垂直居中。
2.再用line-height: Xpx;将元素的行高设置为与父元素同样的高度。#xff08;这里的X代表父元素的高度#xff09; 举例#xff1a; 对于该网页的代码如下#xff1a;
!DOCTYPE html
html
1.先用text-align: center;将文字垂直居中。
2.再用line-height: Xpx;将元素的行高设置为与父元素同样的高度。这里的X代表父元素的高度 举例 对于该网页的代码如下
!DOCTYPE html
htmlheadmeta charsetutf-8title文字水平居中与垂直居中/titlestyle*{margin: 0;padding: 0;}.box1{width: 200px;height: 200px;background-color: blue;}/style/headbodydiv classbox1div classbox2p大家好/p/div/div/body
/html
此时我们对box2中的p元素设置如下样式对于box2来说box1是其父盒子且box1的高度为200px故box2的行高应该设置为200px
!DOCTYPE html
htmlheadmeta charsetutf-8title文字水平居中与垂直居中/titlestyle*{margin: 0;padding: 0;}.box1{width: 200px;height: 200px;background-color: blue;}.box2 p{text-align: center;line-height: 200px;}/style/headbodydiv classbox1div classbox2p大家好/p/div/div/body
/html
效果图如下 注意我们在写网页的时候应该用以下代码初始化网页因为默认有些元素存在内边距和外边距这样我们看见的才是呈现出绝对水平垂直居中的效果。
*{margin: 0;padding: 0;}
