Html 文本对齐：居中对齐'；除非内联css，否则无法工作_Html_Css

Html 文本对齐：居中对齐'；除非内联css，否则无法工作

html css

Html 文本对齐：居中对齐'；除非内联css，否则无法工作,html,css,Html,Css,我想我再也不用问这样的问题了。但事情是这样的 <!doctype html> <head></head> <body> <style type="text/css"> .center_mobile { text-align: center; background: #ccc; width: 300px; } </style> <div class="center_mobile">Dumb!</

我想我再也不用问这样的问题了。但事情是这样的

<!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>

样式

标记需要位于

头部

如果检查元素，您将看到文本对齐规则之前有一个空白。去掉它，把样式放在头上，你就可以开始了。演示：


.center_mobile{文本对齐：中心；背景：#ccc；宽度：300px；}
哑的

样式标签需要在

头部

如果检查元素，您将看到文本对齐规则之前有一个空白。去掉它，把样式放在头上，你就可以开始了。演示：


.center_mobile{文本对齐：中心；背景：#ccc；宽度：300px；}
哑的

删除css块中

文本对齐

规则之前的空格。

删除css块中

文本对齐

规则之前的空格。


<!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>

.center_mobile{左边距：自动；
右边距：自动；文本对齐：居中；背景：#ccc；宽度：300px；}
哑的

希望能有帮助

编辑：

左边距：自动；右边距：自动

添加到类中后，文本将居中。


.center_mobile{左边距：自动；
右边距：自动；文本对齐：居中；背景：#ccc；宽度：300px；}
哑的

希望能有帮助

编辑：

左边距：自动；右边距：自动

添加到类中将使文本居中。

添加

显示：块，完整css：
.center_mobile { 
    display: block;
    text-align: center; 
    background: #ccc; 
    width: 300px; 
}

添加显示：块，完整css：
.center_mobile { 
    display: block;
    text-align: center; 
    background: #ccc; 
    width: 300px; 
}

如果您在标题中包含一个带有样式标记的代码示例，则此答案会有所改进。我不确定这是强制性的。尽管这不一定是最佳做法，style
标记在正文中起作用谢谢，但是，这不是强制性的。如果你在标题中包含一个带有样式标记的代码示例，这个答案会有所改进。我不确定这是强制性的。尽管这不一定是最佳实践，style标记在正文中起作用谢谢，但这不是强制性的。你需要说明你做了什么，否则这就没用了。对不起，我添加了左边空白：自动；和右边距：自动；指向将整个块置于父元素中心，但文本保持在左侧的类。谢谢。你需要说你做了什么，否则这没有帮助。对不起，我添加了左边的空白：自动；和右边距：自动；指向将整个块置于父元素中心，但文本保持在左侧的类。谢谢元素是display:block as default元素是display:block as default我仍然无法解释这背后的逻辑，除了一个bug（？）。删除空白修复了它。center_mobile{text align:center；…}奇怪。除了一个bug（？）之外，我仍然无法解释这背后的逻辑。删除空白修复了它。居中移动{文本对齐：居中；…}奇怪。
<!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>

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