demo29-版心居中 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width: 1000px;
                height: 50px;
                background: pink;
                /*文本居中*/
                text-align: center;
                /*使用版心居中必须满足两个条件:1.必须是块级的显示模式 2.必须要有宽*/
                /*注意:下面的50必须给单位px,否则就不是距离顶部50px,距离左边,右边等距的效果了.*/
                /*因为:margin参数中,如果有两个值的情况下,第一个参数表示的是距离顶部和底部的距离,第二个参数是距离左右的距离*/
                margin:50px auto;
                
            }
            p{
                width: 500px;
                height: 30px;
                background: green;
                margin: auto;
            }
        </style>
    </head>
    <body>
        <div>
            <p></p>
        </div>
    </body>
</html>

 

posted @ 2020-03-28 15:05  砚台是黑的  阅读(160)  评论(0)  编辑  收藏  举报