![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
<!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;"で画像と文字を挟みたいです。
どうすれば、画像&文字をブラウザの真ん中に表示させつつ、文字を画像の真ん中に表示できるのでしょうか?
![「align="middle"が無視される」の質問画像](http://oshiete.xgoo.jp/_/bucket/oshietegoo/images/media/0/1350389_5497d2f7321ce/M.jpg)
No.1ベストアンサー
- 回答日時:
いまどき、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">
<!--
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. … 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();}
で画像をスタイルシートで追加するべきでしょう。画像がコンテンツに関係ないので
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
div要素が重なってします
-
htmlのolやulなどlistにtitleや...
-
グリッドレイアウトで"auto-fit...
-
cssで2列、複数行のテーブルを...
-
HTML属性での「""」 「''」違い
-
<div id="container">の使いか...
-
複数のボタンを等間隔に、かつ...
-
HTML&CSSの勉強方法について
-
【HTML5】セクションを示す要...
-
開閉式の隠し要素が一瞬表示さ...
-
<!-- #BeginLibraryItemとは
-
オススメのホームページ作成ソフト
-
ヘッダーとフッターだけ背景を...
-
コピーライト下・フッター一番...
-
固定幅+可変幅レイアウトがな...
-
サブミット URLを開きたい
-
幅を可変にし2段組をCSSで組む...
-
音声ブラウザ、スクリーンリー...
-
スペースを使わず文字位置を揃...
-
コーディングの勉強法
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
<div id="container">の使いか...
-
複数のボタンを等間隔に、かつ...
-
html の divとtable の役割
-
div要素が重なってします
-
min-heightとheightの違いについて
-
ヘッダーとフッターだけ背景を...
-
1時間30分を簡単に表したいで...
-
divを横に並べる方法
-
html5でheaderの中にnav
-
スペースを使わず文字位置を揃...
-
セクションをdivで囲むと見出し...
-
divとpの使いわけ
-
ブログのサイドバーが下にくる
-
3カラムレイアウトで「常に残り...
-
グリッドレイアウトで"auto-fit...
-
iframeを使わずに上下50%ずつに...
-
ヘッダーを左右に二分割する方...
-
画面を縮小するとカラムが落ち...
おすすめ情報