0

高さが小さく、幅が 100%のコンテナーがあります。ですdisplay:block。

内部には、 text を含む 2 つの同様の要素があります。それらは異なる を持ちfont-size、フロートされます - 1 つは左に、もう 1 つは右に。

垂直中央スケッチ

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しているだけであり、テキスト要素の s が異なるため、使用できませemん。pxfont-size

テキスト要素を垂直方向に中央揃えするにはどうすればよいですか?

4

4 に答える 4

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

[編集] 私はまだコメントできる十分な権限を持っていませんがline-height、 が子要素によって継承されているため、Sandeep の返信は機能しますline-height。

于 2012-07-17T13:08:35.273 に答える
1

と同じ行の高さを書きheightます。次のように書きます。

header{ position:fixed; width:100%; height:5em;line-height:5em; }
于 2012-07-17T12:57:33.790 に答える
0

EMでフォントサイズを測定しているようです。これにより、テキストが伸びたり縮んだりできると思います。次の jQuery のような JS ソリューションを使用できます。

$('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 に答える
0

サイトのタイトルやスローガンなど、通常は頻繁に変更されない要素の場合、必要な視覚的な配置になるまで、要素ごとに異なる余白と上部の距離を設定するだけです。

于 2012-07-17T12:57:24.733 に答える