在一个容器中居中两个不同高度的文本元素答案

【问题标题】：Center two Text Elements of different Heights in a Container在一个容器中居中两个不同高度的文本元素
【发布时间】：2012-07-16 09:36:21
【问题描述】：

我有一个容器，其高度较小，宽度为 100%。是display:block。

里面有两个相似的包含文字的元素。它们有不同的font-sizes 并且是浮动的——一个在左边，另一个在右边。

HTML

<header>
    <h1 class="right">Title</h1>
    <h2 class="left">Slogan</h2>
</header>

CSS

header{ position:fixed; width:100%; height:5em; }
header h1{ font-size:3em; margin:0; }
header h2{ font-size:2em; margin:0; }

我不想使用display:table-cell。而且我不能使用line-height，因为我只使用em而不是px和font-sizes的文本元素不同。

如何使文本元素垂直居中？

【问题讨论】：

我希望能够改变容器的高度。文本元素应始终居中。

标签： html css position center

【解决方案1】：

line-height 与height 相同。像这样写：

header{ position:fixed; width:100%; height:5em;line-height:5em; }

【讨论】：

他说他不能放行高。
Genius ;-) 我不想将line-heights 放在文本元素上。但是把它放在容器上很棒。以前不知道。
@sharethis 为什么你不想要行高
我不想在文本元素中放置确切的行高，因为它们有不同的字体大小。 line-height 是相对于字体大小的值。所以我需要计算它。但是从容器继承的 line-height 很棒。

【解决方案2】：

在我的脑海中，我认为这样的事情可能会奏效：

header h1 { font-size:3em; margin:0; float:right; top:50%; position:relative; margin-top:-0.5em;}
header h2 { font-size:2em; margin:0; float:left; top:50%; position:relative; margin-top:-0.5em;}

[编辑] 我还没有足够的权限来发表评论，但 Sandeep 的回复有效，因为 line-height 是由子元素继承的，因此您间接地给了他们一个 line-height。

【讨论】：

谢谢，应该也可以。但我对 Sandeep 的解决方案很满意。
@sharethis：见我上面的编辑。以防万一你没有注意到这一点:)

【解决方案3】：

如果是网站标题和标语，这些元素通常不会经常变化，我会简单地为每个元素设置不同的边距顶部距离，直到它们在视觉上按照你想要的方式排列。

【讨论】：

【解决方案4】：

我看到您正在测量 EM 中的字体大小，这使我假设文本可以增长和缩小。您可以使用 JS 解决方案，例如 jQuery：

$('h1, h2').each(function(){
    var headerHeight = $(this).outerHeight();
    $(this).css('margin-top', '-' + headerHeight / 2 + 'px');
});

这将伴随一些 CSS，如下所示：

h1, h2 {position: absolute; top: 50%;}

【讨论】：