[已解决]为什么text-align可以盒子居中呢？

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

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

<!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 实现两端对齐文本效果；

跳转到最佳答案楼层

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

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

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

left 把文本排列到左边。默认值：由浏览器决定；
right 把文本排列到右边；
center 把文本排列到中间；
justify 实现两端对齐文本效果；

账号		自动登录	找回密码
密码			立即注册