当前位置 知且行 大前端 css居中策略 下一篇:

css居中策略

文字水平居中

想让盒子中的文字水平居中,需要给盒子设置 text-align:center, 这个属性只能居中文本流元素,如文字、图片、表单元素

<head>
    <title></title>
    <style type="text/css">
        div {
            width: 500px;
            height: 300px;
            border: 1px solid #000;
            text-align: center;
        } 
        img {
            width: 200px;
        }
        
    </style>
</head>
<body>
    <div class="box">
        <img src="https://ws1.sinaimg.cn/large/006tNc79gy1fz0awxiv39j31ao0t6tcv.jpg" alt="">
        <p>盒子内部的文本元素水平居中</p>
    </div>
</body>

盒子水平居中

想让盒子自身水平居中,需要给盒子加上 margin: 0 auto

单行文本垂直居中

使用line-height属性将行高设置为盒子高,单行文本就会垂直居中,仅适用于单行文本,多行不适用

<head>
    <title></title>
    <style type="text/css">
        div {
            width: 300px;
            height: 100px;
            border: 1px solid #000;
            line-height: 100px;
            margin: 0 auto;
            text-align: center;
        } 
    </style>
</head>
<body>
    <div class="box">
        单行文本水平+垂直居中
    </div>
</body>

转载必须注明出处:https://www.zhiqiexing.com/18.html

关于我

我希望能成为一个认真、有趣、创造更多价值的人
关注微信
微信扫一扫关注我

微信扫一扫关注我

返回顶部