Question

我以为我永远不会问这样的事情。但现在就是这样。

<!doctype html>
<head></head>

<body>

<style type="text/css">
    .center_mobile { text-align: center; background: #ccc; width: 300px; }
</style>

<div class="center_mobile">Dumb!</div>

</body>
</html>

为什么div上的文本没有按照text-align的指示集中在其容器上？

然而，这是文本的中心：

<div style="text-align: center;">Dumb!</div>

我不想进入内联风格。如何解决这个＆＃34;问题＆＃34;？

可以在此处运行代码：http://www.practiceboard.com/?936248

感谢。

更新和＆＃34;修复＆＃34;

删除该样式上的空白区域解决了这个问题。

.center_mobile {text-align:center; background: #ccc; width: 300px; }

Answer 1

删除css块中text-align规则之前的空格。

Answer 2

style标记必须位于head

中

如果检查元素，您会在文本对齐规则之前看到有空格。取下它，把风格放在头上，你很高兴。演示：http://www.practiceboard.com/?936288

<!doctype html>
    <head>
        <style>
        .center_mobile {text-align: center; background: #ccc; width: 300px; }
       </style>
    </head>

    <body>
        <div class="center_mobile">Dumb!</div>

    </body>
</html>

Answer 3

<!doctype html>
<head></head>

<body>

<style type="text/css">
    .center_mobile { margin-left: auto;
    margin-right: auto; text-align: center; background: #ccc; width: 300px; }
</style>

<div class="center_mobile">Dumb!</div>

</body>
</html>

希望它有所帮助。

修改

http://www.practiceboard.com/?936279

margin-left：auto; margin-right：auto;

添加到课程中将为您提供文本中心。

Answer 4

添加display: block;，完整的css：

.center_mobile { 
    display: block;
    text-align: center; 
    background: #ccc; 
    width: 300px; 
}

text-align：center除非内联css，否则不会工作

4 个答案: