2

h#要素が箇条書きで囲まれているエフェクトを作成しようとしています。見出しが複数の行にまたがる場合、箇条書きはテキストブロックの左右に配置し、垂直方向の中央に配置する必要があります。

この例のHTML5とCSS3を見てください。

<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
</head>

<body>
    <div class="content-container">
        <h1>Short title</h1>
        <h1>Really long title that will hopefully span multiple lines to demonstrate the problem I'm trying to solve here</h1>
    </div>
</body>

</html>

h1 {
    font-weight: bold;
    text-align: center;
}

h1:before {
    content: '— ';
}

h1:after {
    content: ' —';
}
​

これにより箇条書きがレンダリングされますが、改行があると、箇条書きはテキスト自体で折り返されます。

箇条書きがテキストブロック全体の左または右に配置され、垂直方向の中央に配置されるようにCSSを変更するにはどうすればよいですか？このjsFiddleは、私が説明できるよりも効果をよく表しています。ヘッダー要素の上にコンテナが存在することに注意してください（これらは専用のコンテナではありません）。これも使用できます。

HTMLは非常に脆弱なソリューションであるため、変更したくありません。CMSテンプレート、コンテンツ自体、および将来のすべてのコンテンツ作成者への勅令を変更する必要があります。これは、テーマが再び変更された場合は不要になります。

4

2 に答える 2

1

私はテーブルディスプレイのスタイリングの創造的な使用にかなり近づくことができました：

h1 {
    font-weight: bold;
    text-align: center;
    display: table;
    vertical-align: middle;
    margin-left: auto;
    margin-right: auto;
}

h1:before {
    vertical-align: middle;
    content: '—';
    display: table-cell;
    padding-right: '1em';
}

h1:after {
    vertical-align: middle;
    content: '—';
    display: table-cell;
    padding-left: '1em';
}

なぜ「かなり近い」のですか？まず、これが標準で義務付けられている動作であり、レンダリングの癖だけではないことを確認していません。次に、Chrome18とFirefox12で動作しますが、Internet ExplorerやSafariでチェックインする必要はありません。また、Androidブラウザエンジンでは正しく動作しないことはわかっています。

于 2012-04-30T13:25:15.840 に答える
1

テキストの箇条書きでこれを行う方法はわかりませんが、背景画像で行うことができます。h1CSS3 は複数の背景画像と複数の画像位置をサポートしているため、画像の箇条書きを次のように両端に配置できます。

CSS を次のように置き換えます。

body {text-align:center}

h1 {
    font-weight: bold;
    padding: 0 16px;
    background-image: url(http://www.getyourgame.net/images/BulletPointGreen.png),url(http://www.getyourgame.net/images/BulletPointGreen.png);
    background-position: left center, right center;
    background-repeat: no-repeat;
    display: inline-block;
}

箇条書きのスペースを確保するためにパディングが必要です。箇条書きの画像をランダムに使用しましたが、2 回指定していることに注意してください。次に、これら 2 つの画像に異なる位置を指定できます。の左右に 1 つずつh1。最後に、幅全体を埋めるdisplay:inline-blockことを防ぎh1ます。これにより、箇条書きが常に見出しテキストの端ではなく、親要素の端に配置されます。

これがうまくいくことを願っています。

于 2012-04-25T16:40:59.097 に答える