0
点赞
收藏
分享

微信扫一扫

Linux_正点VMware Workstation Pro 密钥

滚过红尘说红尘 2023-11-17 阅读 11
html前端
简单方法:

1.先用text-align: center;将文字垂直居中。

2.再用line-height: Xpx;将元素的行高设置为与父元素同样的高度。(这里的X代表父元素的高度)


举例:

对于该网页的代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>文字水平居中与垂直居中</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .box1{
               width: 200px;
               height: 200px;
               background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="box1">
            <div class="box2"><p>大家好!</p></div>
        </div>
    </body>
</html>

此时我们对box2中的p元素设置如下样式(对于box2来说,box1是其父盒子,且box1的高度为200px,故box2的行高应该设置为200px):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>文字水平居中与垂直居中</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .box1{
               width: 200px;
               height: 200px;
               background-color: blue;
            }
            .box2 p{
                text-align: center;
                line-height: 200px;
            }
        </style>
    </head>
    <body>
        <div class="box1">
            <div class="box2"><p>大家好!</p></div>
        </div>
    </body>
</html>

效果图如下:

 注意:我们在写网页的时候应该用以下代码初始化网页,因为默认有些元素存在内边距和外边距,这样我们看见的才是呈现出绝对水平垂直居中的效果。

*{
     margin: 0;
     padding: 0;
            }
举报

相关推荐

0 条评论