2

codecademy で HTML/CSS を学んでいますが、CSS の境界線にこの問題があります。h1 を境界線で中央に配置する必要がありますが、その境界線をページの端まで移動させたくありません。これが私のコードです

<h1 style="color:#0034ff; padding:20px; border-style:ridge; border-width:5px; text-align:center;">HTML Testing Page</h1>

すぐに別のスタイル シートを作成する予定です。CSS を HTML ドキュメントに入れてテストするだけです。この境界線はページの最後まで表示され、display:inline または display:inline-block を配置すると、テキストが中央に配置されなくなります。中央揃えのテキストを犠牲にすることなく、境界線をテキストの隣に配置するにはどうすればよいですか?

4

3 に答える 3

4

追加display:inline-block

h1 タグはブロック要素なので、スペース全体を占めています。

デモhttp://jsfiddle.net/rm3Fk/

h1タグをページの中央に揃えたい場合は、次を使用できますdisplay:table; margin:0 auto

デモhttp://jsfiddle.net/rm3Fk/17/

于 2012-09-17T12:38:48.953 に答える
1

確かに、これh1はブロック要素ですが、これを探していると思います。

h1 {
    color:#0034ff;
    padding:20px;
    border-style:ridge;
    border-width:5px;
    margin: 0 auto; /* <--- */
    display: table; /* <--- */ 
}​

これにより、親の幅全体を使用せずに見出しが中央に配置されます。

http://jsfiddle.net/rm3Fk/11/

于 2012-09-17T12:51:12.153 に答える
1

こんにちは display:inline-block;、h1タグに慣れました

<h1 style="color:#0034ff; padding:20px; border-style:ridge; border-width:5px;display:inline-block; text-align:center;">HTML Testing Page</h1>

すべての見出し要素はブロック要素 です

デモ

于 2012-09-17T12:38:54.290 に答える