html - 如何垂直和水平对齐两个具有不同字体大小的跨度

Question

我在一个段落中有两个跨度，其中文本的字体大小不同。我想相应地左右对齐它们。我还想在基线处垂直对齐它们。正如您在此 JSFiddle 中看到的那样我不能同时使用文本对齐和 float 同时执行这两个操作。

html :

<p>
<span class="one">Something</span>
<span class="two">Something Else</span>
</p>

CSS :

p {
    border: 1px solid black;
}

p span {
    vertical-align: baseline;
}

.one {
    font-size: 2.0em;
}

.two {
    /* text-align: right; */
    float: right;
    font-size: 3.0em;
}

Answer 1

实现此目的的一种方法是使用 text-align-last 属性，它可以将单行段落的内容对齐到两个边距。然后制作 spans inline-block 以防止 spans 内的空间扩展。

p {
   border:1px solid black;
   text-align:justify;
   -moz-text-align-last:justify;
   text-align-last:justify;
}

p span {
   vertical-align:baseline;
   display:inline-block;
}

就是这样。没有 float ，没有文本对齐跨度。参见 fiddle .

另一种方法是使用 flex 盒子。
请注意，当段落为 flex 时，vertical-align 不再有效，您将需要使用 align-items。然后将 auto 的左边距添加到最右边的 span 以将其刷新到右边。

p {
   border:1px solid black;
   display:-webkit-flex;
   display:-moz-flex;
   display:flex;
   -webkit-align-items: baseline;
   align-items: baseline;
}

.one {
   font-size:2.0em;
}

.two {
   font-size:3.0em;
   margin-left:auto;
}

参见 other fidde .

您要使用哪种方法可能取决于您的受众。第一个在旧版本的 Chrome 中不起作用，它只在 v35 中定义。第二个在 11 以下的 IE 版本中不起作用。