ブラウザでの文字表示と画像配置の調整方法について
- ブラウザで表示する際に、align='middle'を指定しても文字がTOPの位置に表示される問題があります。
- div要素にstyle='text-align:center;'を追加することで、文字と画像をブラウザの中央に配置することができます。
- しかし、文字が画像の中央に配置されるためには、font-sizeを設定する必要があります。
- ベストアンサー
align="middle"が無視される TOPに
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title lang="ja">文書タイトル</title> </head> <body> <div style="text-align:center;" style="font-size:400%;"> <IMG SRC="http://pic.prepics-cdn.com/sugarcherry/21910244.jpeg" WIDTH=100 HEIGHT=100 align="middle"> test <IMG SRC="http://pic.prepics-cdn.com/sugarcherry/21910244.jpeg" WIDTH=100 HEIGHT=100 align="middle"> </div> </body> </html> これをブラウザで表示すると、align="middle"とやってるのに、画像のように文字がTOPの位置に表示されてしまいます。 <div style="text-align:center;" style="font-size:400%;"> がなければ、文字は画像のど真ん中に表示されるのですが、 font-size:400%;はまだしも、画像もブラウザの真ん中に表示させたいので <div style="text-align:center;"で画像と文字を挟みたいです。 どうすれば、画像＆文字をブラウザの真ん中に表示させつつ、文字を画像の真ん中に表示できるのでしょうか？
- qgigymibyi6
- お礼率100% (52/52)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
いまどき、transitinalはさすがに古いのでstrictで・・ ⇒HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 ) またその文書宣言では、互換モードで表示されるためブラウザ間の表示誤差に悩まされることになります。 ⇒DOCTYPEスイッチ－HTMLの基本( http://www.htmq.com/htmlkihon/302.shtml ) 様々な方法が思いつきますが、できるだけオリジナルを生かして書き直すと・・ 注)見出しtitleですから、divではなく<h1></h1>で括るべきです。 DIVは他に適切な要素がないときの最後の手段です。そのときも「文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」にidやclassをつけます。 ⇒Authors are strongly encouraged to view the div element as an element of last resort( http://www.w3.org/TR/html5/grouping-content.html#the-div-element ) ★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html ) ★W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済み タブは＿に置換してあるので戻すこと。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- div.header h1{ font-size:50px;line-height:50px;text-align:center; height:100px;padding-bottom:25px;margin:0; position:relative;top:-25px; } div.header h1 img{position:relative;top:25px;margin:0 10px} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1><img src="http://pic.prepics-cdn.com/sugarcherry/21910244.jpeg" width="100" height="100" alt="">タイトル<img src="http://pic.prepics-cdn.com/sugarcherry/21910244.jpeg" width="100" height="100" alt=""></h1> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>・・・</p> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-03-12</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html> なお本来なら、 <h1>タイトル</h1> とだけ書いておいて、 h1:before{content:url();} h1:after{content:url();} で画像をスタイルシートで追加するべきでしょう。画像がコンテンツに関係ないので
関連するQ&A
- vertical-align
div#input { font-size:16px; width: 162px; height: 36px; border:solid 2px #000000; background-image: url("bn/ba042.gif"); padding:2px; margin:3px; list-style : none; border : none; vertical-align: middle; } <div id="input"><a href="">こんばんは！</a></div> 「こんばんは！」の文字が上についた状態（ＴＯＰ）になっているので、真ん中に配置しようと vertical-align: middle; を入れたのですが、 何故か真ん中に表示されません。 ＩＥは６．０ですが、他の値（top bottom 他）も含め対応になっています。 どこがおかしいのでしょうか？よろしくお願いします。
- ベストアンサー
- その他（プログラミング・開発）
- text-alignについての疑問
スタイルシートに {text-align:center;position:absolute;bottom:50px;} と入れて、一番下にあるCopyright©○○という位置を固定して、真ん中にしたいんですが そうなりません。 position:absoluteを使ったときはセンタリングできないのでしょうか？？ また、この場合はどうやればいいのでしょうか？？ もう一つ質問させて頂きます。 <span style="text-align:center">aaaaaaaaaaaa aaaaaaaa</span> とやってもセンタリングできません。 <span>を<div>に変えると真ん中に来ます。 <span>タグだと"text-align:center"は使えないということでしょうか？？ 一つでもいいのでわかる方いらっしゃいましたらよろしくお願い致します。
- ベストアンサー
- HTML
- 文字のサイズを大きくしつつ、中央に表示させるには？
ファイアフォックスで、文字のサイズを大きくしつつ、中央に表示させるには？ <BODY> <div style="text-align:center;" style="font-size:300%;">test1</div> <div style="font-size:300%;">test2</div> </BODY> これをすると、test1は中央に表示されるけど文字は小さいままで test２は、文字は大きく表示されるけど中央には表示されません。 どちらも行うにはどうすればいいでしょうか？ IEでは<div style="text-align:center;" style="font-size:300%;">test1</div>で、 中央に表示されつつ、文字も大きくなります。
- ベストアンサー
- HTML
- div style 簡素化するには？
<div style="text-align:center;" style="font-size:50%;"> を簡素化するにはどうすればいいでしょうか？ <div style="text-align:center;" "font-size:50%;"> にしたら、うまく表示されませんでした。
- ベストアンサー
- HTML
- xhtmlについて
xhtmlでは、『<div style="text-align:center;font-size:x-small;">文字</div>』といったように、ブロック要素内にインライン要素をまとめることも可能だったと思います。 この場合、文字サイズ指定もブロック要素内にあるわけですから、『<div style="text-align:center;font-size:x-small;"><p>文字</p></div>』といった具合に、ブロック要素を内包することも可能なのでしょうか？ 回答お願い致します。
- ベストアンサー
- その他（インターネット・Webサービス）
- text-alignの解除の方法
text-alignの解除の方法ってありませんか？ 例えばhtml内に以下のタグがあるとして、 <div style="text-align:center;"> <div style="width:100px; height:120px; background-image:url(○○○.jpg)"> <div style="width 50px; height: 60px; position:absolute; margin-top: 20px; margin-left:5px"> <p>あいうえおあいうえお</p> </div> </div> </div> このような場合に<div style="width:100px; height:120px; background-image:url(○○○.jpg)">から、対応している</div>のtext-alignを解除する方法ってありませんか？ IEの標準には対応するのですが、互換だとブロック要素までもがセンタリングされてしまうため困っています。 分かりづらくて申し訳ありません。
- 締切済み
- HTML
- css tr align="center" valign="middle"
こんにちは、 CSSで <tr align="center" valign="middle">に該当するものって何になるのでしょうか？ DremWeaver8でCSSスタイル一覧で探すことができませんでした。 何かお分かりの方がいましたら教えてください。 よろしくお願いします。
- ベストアンサー
- その他(業務ソフトウェア)
- タイプライタ風の文字を真ん中にもってきたい
タイプライタ風の文章をセンターにもってきたいのですが、 どうしても左によってしまいます。 ブラウザの大きさを変えても常に真ん中に もってくる方法はありますでしょうか。 失敗例としては、 <DIV id="type" style="text-align:center; position:absolute; このようにtext-align:center; を入れても タイプライター風な出方がくずれてダメでした。 どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- tableに対するdiv
テーブル内の文字色を白にしたい場合、 <style type="text/css"><!-- div.font{color:white;} --></style> <tr> <div class="font"> <td align="center" width="20%">★１</td> <td align="center" width="20%">★２</td> <td align="center" width="20%">★３</td> <td align="center" width="20%">★４</td> <td align="center" width="20%">★５</td> </div> </tr> このように指定しましたが、適用されません。 なぜでしょう？
- ベストアンサー
- HTML
- 段落内の "text-align" の重複
CSSについての質問です。 <p>タグの段落内で "text-align" を使用して、 文字を寄せる記述をしているのですが、 「中央揃え」と「右寄せ」が重なってしまい、うまく表示されません。 分かりにくい説明だと思いますので、ソース例を書きます。 --------------------------------------------------------- <p style="text-align: center;">文字を中央に <span style="text-align: right;">こちらは右寄せ</span></p> --------------------------------------------------------- 上記のように記述しています。 つまり、段落内は基本的に中央揃えなのだが、 一部は右寄せにする…のようなことが、 CSSで実現できるのでしょうか。 どなたかご回答をよろしくお願いします。
- ベストアンサー
- CSS
お礼
ありがとうございます。