html - 为什么我的文字不能正确对齐？

Question

我有一些文本分为两部分，一个标题和一个值(如果我能做到这一点，它们将通过 javascript 更新!)例如 Temp Max 和 20.0，这一行上面有四行，我我希望所有数字都垂直排列，我认为这很容易，但我就是无法让它发挥作用。

我已经在 html 和 css 中尝试了 text-align, align:right 等等。

我做错了什么？ (我觉得这将是一个愚蠢的错误，所以提前道歉!)

HTML:

<div class="ex2">
<div class="ex4">
<h2>Temp Max</h2> <h3><span id="maxTemp1"; align="right">0.00</span></h3><br>
<h2>Temp Min</h2> <h3><span id="maxTemp2"; align="right">0.00</span></h3><br>
<h2>Hum Max</h2> <h3><span id="maxTemp3"; align="right">0.00</span></h3><br>
<h2>Hum Min</h2> <h3><span id="maxTemp3"; align="right">0.00</span></h3><br>
</div>
</div>

CSS:

h2  { font: bold 1.4em "Trebuchet MS", Helvetica, Sans-Serif; display:inline}
h3  { font: bold 1.4em "Trebuchet MS", Helvetica, Sans-Serif; display:inline; color:#366}


.ex2
{
width:320px;
height:120px;
padding-top:2px;
padding-bottom:10px;
padding-right:10px;
padding-left:10px;
border:1px;
border-color:#FF4C4C;
border-style:dashed;
margin:2px;
overflow: hidden;
float: left;
}

.ex4
{
border:1px;
border-style:dashed;
border-color:#FF4C4C;
width:200px;
height:110px;
float: right;
display:inline;
}

jsfiddle

Answer 1

align 属性已弃用(因此不应再使用)并且从一开始就不会应用于 span 元素。

text-align CSS 属性将使 block 元素的内联内容居中(因此您需要将其应用于 h3 而不是 span)。

---

注意:您的温度不是标题，因此不应将它们标记为 h3。 div 会更合适。

---

就此而言，您的数据最好标记为:

<table>
    <tr>
        <th scope="row" rowspan="2"><abbr title="Temperature">Temp</abbr></th>
        <th scope="row"><abbr title="Maximum">Max</abbr></th>
        <td>0.00</td>
    </tr>
    <tr>
        <th scope="row"><abbr title="Minimum">Min</abbr></th>
        <td>0.00</td>
    </tr>
    <tr>
        <th scope="row" rowspan="2"><abbr title="Humidity">Hum</abbr></th>
        <th scope="row"><abbr title="Maximum">Max</abbr></th>
        <td>0.00</td>
    </tr>
    <tr>
        <th scope="row"><abbr title="Minimum">Min</abbr></th>
        <td>0.00</td>
    </tr>
</table>