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

【问题标题】：How to align both vertically and horizontally two spans with different font sizes如何垂直和水平对齐两个具有不同字体大小的跨度
【发布时间】：2015-05-06 13:41:11
【问题描述】：

我在一个段落中有两个不同字体大小的文本。我想相应地左右水平对齐它们。我还想在基线处垂直对齐它们。正如您在JSFiddle 中看到的那样，我不能同时使用 text-align 和 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;
}

【问题讨论】：

标签： html css

【解决方案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;
}

就是这样。没有浮动，没有文本对齐跨度。见fiddle。

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

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 版本中不起作用。

【讨论】：