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

Question

我有一个容器，其固定高度小，宽度为100％。它是display:block。

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

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-size不同。

如何垂直居中文本元素？

Answer 1

将行高写为height。写得像这样：

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

Answer 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

Answer 3

如果它是一个网站标题和标语，通常不会频繁更改的元素，我只需为每个元素设置不同的margin-top距离，直到它们按照您想要的方式排列。

Answer 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%;}