集裝箱中不同高度的中心兩個文字元素

我有一個集裝箱，它有一個小的固定高度和100％的寬度。它是display:block。集裝箱中不同高度的中心兩個文字元素

裏面有兩個相似的元素包含文字。他們有不同的font-size s，並浮動 - 一個在左邊，另一個在右邊。

vertical center skectch

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

如何垂直居中文本元素？

來源

2012-07-17 danijar

使用邊距或填充。 – SVS 2012-07-17 12:56:41

我希望能夠改變容器的高度。文本元素應始終居中。 – danijar 2012-07-17 12:57:45

寫行高與height相同。這樣寫：

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

來源

2012-07-17 12:57:33 sandeep

他說他不能放線高。 – SVS 2012-07-17 12:58:51

天才;-)我不想在文本元素上放置「行高」。但把它放在容器上是很好的。之前不知道。 – danijar 2012-07-17 13:00:48

@sharethis爲什麼你不想要行高 – sandeep 2012-07-17 13:07:06

如果是網站標題和口號，通常不會頻繁更改的元素，我會爲每個元素設置不同的頁邊距，直到它們按照您想要的方式在視覺上排列。

來源

2012-07-17 12:57:24 chipcullen

我看到你正在測量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-17 13:00:56

關閉我的頭頂，我覺得這樣的事情可能工作：

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由子元素繼承，所以你間接給個em a line-height。

來源

2012-07-17 13:08:35 Raskolnik

謝謝，也應該工作。但我對sandeep的解決方案感到滿意。 – danijar 2012-07-17 13:16:07

@sharethis：看到我上面的修改。以防萬一你沒有注意到這一點:) – Raskolnik 2012-07-17 13:20:30

我看到了你的編輯。謝謝你的解釋。 – danijar 2012-07-17 15:48:28

集裝箱中不同高度的中心兩個文字元素

回答

相關問題