使用 CSS 垂直对齐具有不同字体大小的两段文本答案

【问题标题】：Vertically align two pieces of text with different font-sizes using CSS使用 CSS 垂直对齐具有不同字体大小的两段文本
【发布时间】：2012-03-22 19:04:55
【问题描述】：

在我的页面顶部，我希望页面的标题与屏幕左侧对齐，并在屏幕右侧对齐一个简短的导航菜单。我可以使用 float 来实现这一点，但是这两个元素具有不同的基线，即文本的基线看起来不同。有没有办法让这个使用css工作？我有一个我在 jsfiddle http://jsfiddle.net/nBPCG/63/ 上尝试做的样本

【问题讨论】：

CSS 不允许使用 // 单行注释。它弄乱了您的标题 div{} 样式。
您还有标题 div {...} 样式被应用到 clear div 的问题，导致它无法正常工作。我会在标题 div 中添加一个 id，这样你就可以只定位那个 div。
您好，感谢您指出这些错误

标签： html css fonts alignment

【解决方案1】：

您好，您可以在 h1 中使用 display:inline-block

或查看小提琴：- http://jsfiddle.net/nBPCG/101/

【讨论】：

嗨，感谢您的建议，但使用此方法导航菜单与标题的中心对齐，而我希望它与底部对齐

【解决方案2】：

首先我建议使用ul 来包装链接而不是h3，这种结构没有意义。然后我会在ul 中添加一些填充。这是标记的清理示例：

<article >
<header>
    <h1>This is Title</h1>
    <nav>
        <ul>
            <li><a href="">Home</a></li>
            <li><a href="">Works</a></li>
            <li><a href="">Blog</a></li>
            <li><a href="">Contact</a></li>  
        </ul>
    </nav>
    <div class="clr"></div>
</header>
</article>

还有样式：

body {
    font-family:"Verdana", Verdana, sans-serif;
    font-size: 1em;
    font-weight:400;
}

h1 {
    font-family:"Century Gothic", Verdana, sans-serif;
    font-size: 4em;
    font-weight:400;
    float: left;
    margin-left:10px;
}

header nav {
    margin-right: 10px;
    float: right;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 2em 0 0 0;
}

nav ul li {
    display: inline;
    font-size: 1.2em;
    font-weight:400;
}

nav a {
    padding: 0 1em;
    border-right: 1px solid #000;
}

nav li:last-child a {
    padding-right: 0;
    border-right: none;
}

.clr {clear:both;}

小提琴：http://jsfiddle.net/nBPCG/98/

【讨论】：

您好，感谢您的建议，但使用此方法导航菜单与标题的中心对齐，而我希望它与底部对齐。我将链接包装在 h3 中，因为它们使用该样式，在列表项中添加似乎相当多余