1

次のように表示したいテキストがあります。

SOME HEADING TEXT
And then a bunch
of text under
that wrapped to
the width of the
heading.

私が言いたいのは、下に本文テキストがある見出しが欲しいということです。このブロック内でテキストを左揃えにします。ブロックの幅を見出しの幅で定義したい。次に、ブロック全体をその親の中心に配置します。

見出しがたとえば 100 ピクセルであることがわかっていれば、次のように書くことができます。

<div style="width: 100px;margin:0 auto">
etc.

しかし、見出しの幅がわかりません。静的で測定したとしても、ユーザーがフォントサイズなどを変更した場合、さまざまなブラウザでは信頼できないと思います.

width:0 と言って、見出しに   を入れてみました。見出しは問題なく表示されましたが、本文は 1 行に 1 単語で表示されました。

役立つヒントはありますか？

4

2 に答える 2

1

含まれているヘッダー要素内にテキストを絶対に配置することで、やろうとしていることを達成できます。

HTML:

<h1>
    SOME HEADING TEXT

    <span>
        And then a bunch
        of text under
        that wrapped to
        the width of the
        heading.
    </span>

</h1>

CSS:

h1 { display: inline-block; position: relative; }
h1 span { text-align: center; display: block; position: absolute; font: 14px/20px Helvetica, sans-serif; }

フィドル: http://jsfiddle.net/ftkdD/1/

*注: 私はこれを Firefox でのみテストしました。また、高さをクリアするために要素の下にコンテンツが設定されている場合、要素の高さが問題になる可能性があることに注意することが重要です。絶対位置のテキストは影響しないため、下マージンまたはパディングを適用する必要があります。要素全体の高さ。ここでわかるように: http://jsfiddle.net/ftkdD/2/ *

于 2013-04-02T17:40:59.253 に答える
0

このフィドルはあなたが望むものに見えますか?

http://jsfiddle.net/2Rc2j/3/

CSS:

#main{
    width: 200px;
    height: 50px;
    margin: 0 auto;
    background: red;
}

#header{
    background: blue;
}

HTML:

<div id="header">
    <div id="main">

    </div>
</div>
于 2013-04-02T17:16:12.093 に答える