html - 取消 Text-Align 的 CSS Display 属性

Question

我在这里遇到对齐问题。我让 jQuery 为我填充一个字段。我想添加我对 HTML 实体所做的度数符号。出于某种原因，当我为这两个元素提供 display: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，所以您将替换 display: block; 的标准 h1 默认值。

如果您希望它们居中并位于 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;，但仍会为您提供标记 id 和 class 需要通过 jQuery 进行更改。