0

我有一个固定高度和 100% 宽度的容器。它是display:block。

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

垂直中心草图

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的文本元素不同。

如何垂直居中文本元素？

4

4 回答 4

1

写行高与height. 像这样写：

header{ position:fixed; width:100%; height:5em;line-height:5em; }
于 2012-07-17T12:57:33.790 回答
1

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

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.

于 2012-07-17T13:08:35.273 回答
0

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

于 2012-07-17T12:57:24.733 回答
0

我看到您正在测量 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%;}
于 2012-07-17T13:00:56.883 回答