HTML文本对齐属性不起作用答案

【问题标题】：HTML text align property not workingHTML文本对齐属性不起作用
【发布时间】：2014-08-05 00:14:01
【问题描述】：

我在使用“text-align”属性时遇到问题，因为在以下代码中不起作用：

<Titulo1>Title Text</Titulo1>
<BR>
<h1>Normal Text</h1>

CSS：

*               {font-family: Arial; color: #2D2D2D}
Titulo1         {font-size: 40px; font-weight: 900; text-align: center}
TextoNormal     {font-size: 30px; text-align: center}

这里有更多详细信息：http://jsfiddle.net/jB7X3/3/

【问题讨论】：

为什么要自己制作元素？不过，除此之外，您的自定义元素默认为 display: inline（对我来说，在 Chrome 中），如果您指定 display: block;（或宽度大于内容本身的 display: inline-block）它可以工作：demo (display: block)，@ 987654323@.
Titulo1 不是有效的 HTML 元素（TexttoNormal 也不是）。如果您尝试这样使用它，它将导致各种问题。这就是 HTML 类和 ID 的用途。
Titulo1 和 TextoNormal 是什么（我什至在 HTML 中都没有看到）？
感谢所有帮助我解决问题的 cmets。我是这方面的新手，我试图创建自己的元素，以便确切地知道他们在做什么。由于这不是最佳实践，我将使用现有的 HTML，并了解有关 HTML 类和 ID 的更多信息。

标签： html css text-align

【解决方案1】：

自定义标签默认为inline 元素。您需要在其中添加display: block。

Demo

css

* {
    font-family: Arial;
    color: #2D2D2D
}
Titulo1 {
    font-size: 40px;
    font-weight: 900;
    text-align: center;
    display: block /* add this if you wish to continue using your css */
}
TextoNormal { /* css property are not applied by content, so this will not work */
    font-size: 30px;
    text-align: center;
}

/* or a better way as in html */

<!-- or better way -->


<div>Title Text</div>

div{
    text-align: center;
}

h1 {
text-align: center;
}

【讨论】：

感谢您的评论。我给了我更多的选择来解决我的问题。我是这方面的新手，我正在尝试找出用 HTML 编程的最佳方法。欢迎提出更多建议。
如果您还有任何疑问，欢迎提出。你可以接受这个答案。