将不同跨距的不同文本对齐到同一行

Question

我正在尝试创建一个从数据库中获取一些信息的表。但数据有不同的风格，例如不同的字体大小。因此，他们需要在同一条线上。

HTML

<div id="parent">
    <span id="first">first</span>
    <span id="second">second</span>
</div>

CSS

span { vertical-align: text-bottom; }
#first {
    font-size:200%;   
}

#second {
    font-size: 100%;
}

但这些代码并没有解决这个问题。这是一个示例fiddle。

Answer 1

将vertical-align: baseline用于您的跨度：

span { vertical-align: baseline; }

小提琴：here

Answer 2

你不能只需要%来获得一个值：

#first {
    font-size:0%;   
}

此答案基于您用于小提琴的代码。

Answer 3

您可以根据自己的要求添加以下css之一。

span { vertical-align: center;  }
span { vertical-align: baseline; }