Question

我不能得到一个较小的（上标）内联元素来与另一个内联元素对齐。

基本上，em元素（包含单词'USD'）应与内联文本（包含单词ABC）对齐，因此单词的两个顶部都在同一行。

对于我的下面的代码，即使我将行高设置为35px，单词USD也是一半;

任何想法我做错了什么？

谢谢，

克里斯

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.plan-types-pricing
{
    font-size: 35px;
    line-height: 35px;
}

.plan-types-pricing strong
{
    display: block;
}

.plan-types-pricing em
{
    font-size:12px;
    vertical-align: top;
    line-height: 35px;
}

.plan-types-pricing small
{
    font-size: 12px;
    vertical-align: baseline;
}

</style>
</head>
<body>
    <span class="plan-types-pricing">
        <strong>Starting at</strong>
        <em>USD</em>
        ABC
        <small>/month</small>
    </span>
</body>
</html>

Answer 1

.plan-types-pricing em的行高应该是所需的高度 - 字体大小（35 - 12 = 23）因此，将line-height的{{1}}设置为em。

23px

CSS无法垂直排列元素

1 个答案: