CSS显示属性取消文字对齐

Question

我在对齐时遇到问题。我有jQuery为我填充一个字段。我想添加我用HTML实体做的度数符号。出于某种原因，当我给两个项目显示：inline属性text-align：center;属性被忽略。任何人都可以解释为什么以及如何解决？这是有问题的代码...

HTML

<h1 class="curr-temp" id="farh"></h1><h1 class="curr-temp">&deg</h1>
<button id="switch">F/C</button>

CSS

.curr-temp {
    display:inline;
    text-align:center;  
}

Answer 1

因为当您设置display:inline时，.curr-temp的宽度仅与其中的内容一样宽，因此对齐变得无关紧要。因为您将这两个元素都设置为h1，所以您将替换h1的标准display: block;默认值。

如果您希望它们居中并位于h1内，请修改标记，如下所示：

h1 {
  text-align: center;
}

<h1><span class="curr-temp" id="farh">5</span><span class="curr-temp">&deg</span></h1>
    <button id="switch">F/C</button>

这会将两个元素包含在您想要的h1中，这将保留text-align: center;，但仍会为您提供通过jQuery进行更改所需的标记id和class

Answer 2

您可以在标签内包装两个H1标签。

当您设置＆＃34;内联＆＃34; h1或其他头标签的属性，那么它们将没有100％宽度的包装。 Couse of this不会居中。