御笔剑客 发表于 2018-5-23 01:21:22

为什么text-align可以盒子居中呢？

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>demo7</title>
        <style type="text/css">
                body {
                        background-color: #000;
                }
                div {
                        text-align: center;
                }
                a {
                        width: 200px;
                        height: 50px;
                        /*background-color: orange;*/
                        display: inline-block;
                        text-align: center;/*文字水平居中*/
                        line-height: 50px; /*在一行的盒子内，将行高设置为盒子的高度，即可实现垂直居中*/
                        color: #fff;
                        font-size: 22px;
                        text-decoration: none;/*取消文本装饰*/
                }

                a:hover {
                        background:url('h.png') no-repeat;
                }
        </style>
</head>
<body>
        <div>
        <a href="#">专区说明</a>
        <a href="#">申请资格</a>
        <a href="#">兑换奖励</a>
        <a href="#">下载游戏</a>
        </div>
</body>
</html>

第一张图是居中的，第二张图是靠左的

不二如是 发表于 2018-5-23 07:51:11

因为text-align就是用来干这个的阿

text-align属性指定元素文本的水平对齐方式。

left        把文本排列到左边。默认值：由浏览器决定；
right        把文本排列到右边；
center        把文本排列到中间；
justify        实现两端对齐文本效果；
页: [1]
查看完整版本: 为什么text-align可以盒子居中呢？