- ベストアンサー
ＣＳＳで見出しの両側に文字を表示したい
- ＣＳＳ+ＨＴＭＬでWebページを作成しています。その中で見出し(H3タグ)の両側に、右寄せ左寄せで文字を表示したいのです。
- ソース全文載せましたが、見出しの下に右寄せと左寄せの文字が、表示されてしまいます。見出しの両側に表示させるにはどうしたらよいですか？
- ＣＳＳのdiv.heading h3クラスにtext-alignプロパティを追加し、centerに設定することで、見出しのテキストを中央に配置できます。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
htmlにdivを追加しましたが、こんな感じでいかがでしょうか？（すみません確認はしてないです） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title></title> <STYLE TYPE="TEXT/CSS"> <!-- div.heading { width: 450px; background-color: #e0e0e0; border: #e0e0c0 solid; border-width: 1px 1px 2px; margin-left: auto; margin-right: auto; } /* --- 見出し --- */ div.hoge { margin: 0; padding: 7px 7px 4px; border-bottom: 4px #9825e1 solid; text-align: center; line-height: 100%; } div.heading h3 { display: inline; margin: 0; } span { float: left; width: 100px; text-align: center; } span.back { float: left; } span.next { float: right; } }--> </STYLE> </head> <body> <!--全体(wrapper) Start--> <div class="all-wrapper"> <div class="main-wrapper"> <div class="heading"> <div class="hoge"> <h3>見出し</h3> <span class="back"><a href="#">BACK</a></span> <span class="next"><a href="#">NEXT</a></span> </div> </div> </div> </div> </body> </html>
その他の回答 (1)
- sr-ki
- ベストアンサー率66% (6/9)
html側を .back → h3 → .next の順に配置するなどすれば比較的簡単なんですが、気持よくh3を上に置きたい場合はちょっと悩ましいですね。 絶対配置でこんな感じではいかがでしょう？ span要素の、 top,left,right の値を微調整して位置を調整すれば、ご希望の感じにできると思います。 （すみませんまた確認してません） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title></title> <STYLE TYPE="TEXT/CSS"> <!-- div.heading { position: relative; width: 450px; background-color: #e0e0e0; border: #e0e0c0 solid; border-width: 1px 1px 2px; margin-left: auto; margin-right: auto; } /* --- 見出し --- */ div.heading h3 { margin: 0; padding: 7px 7px 4px; border-bottom: 4px #9825e1 solid; font-size: 100%; line-height: 100%; text-align: center; } span { width: 100px; text-align: center; } span.back { position: absolute; top: 0px; left: 0px; } span.next { position: absolute; top: 0px; right: 0px; } }--> </STYLE> </head> <body> <!--全体(wrapper) Start--> <div class="all-wrapper"> <div class="main-wrapper"> <div class="heading"> <h3>見出し</h3> <span class="back"><a href="#">BACK</a></span><span class="next"><a href="#">NEXT</a></span> </div> </div> </div> </body> </html>
お礼
IE6・7に関してはIE6・7のスターハックで自己解決しました html*span { margin-top: -22px; } 大変ありがとうございました。
補足
回答ありがとうございます。 FireFox、Opera、Safari、Chromeでは動作確認できました。 IEではうまく表示できませんでした。 アドバイスをお願いいたします。