align="middle"が無視される　TOPに

解決済

質問者：qgigymibyi6
質問日時：2013/03/11 22:38
回答数：1件

<!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. … WIDTH=100 HEIGHT=100 align="middle">
test
<IMG SRC="http://pic.prepics-cdn.com/sugarcherry/21910244. … 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;"で画像と文字を挟みたいです。

どうすれば、画像＆文字をブラウザの真ん中に表示させつつ、文字を画像の真ん中に表示できるのでしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： ORUKA1951
回答日時：2013/03/12 09:10

いまどき、transitinalはさすがに古いのでstrictで・・

⇒HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　またその文書宣言では、互換モードで表示されるためブラウザ間の表示誤差に悩まされることになります。
　⇒DOCTYPEスイッチ－HTMLの基本( http://www.htmq.com/htmlkihon/302.shtml )

様々な方法が思いつきますが、できるだけオリジナルを生かして書き直すと・・
注)見出しtitleですから、divではなく<h1></h1>で括るべきです。
　DIVは他に適切な要素がないときの最後の手段です。そのときも「文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」に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 … )

★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html )
★W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_ … )
で検証済み
タブは＿に置換してあるので戻すこと。
<!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">

＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1><img src="http://pic.prepics-cdn.com/sugarcherry/21910244. … width="100" height="100" alt="">タイトル<img src="http://pic.prepics-cdn.com/sugarcherry/21910244. … 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();}
で画像をスタイルシートで追加するべきでしょう。画像がコンテンツに関係ないので