CSSに関する質問：display:table-cell;がIEで効かない場合のミドル配置方法

2011/11/18 15:24

このQ&Aのポイント

CSSを使用して画像をミドルに配置する方法について質問があります。
firefoxではdisplay:table-cell;というプロパティを使用することで、画像をミドルに配置することができましたが、IEではこの方法がうまく機能しませんでした。
IEでも画像をミドルに配置する方法があれば教えていただきたいです。

a-----n
お礼率58% (77/131)

CSS
回答数5
ありがとう数18

みんなの回答 （5）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/11/21 14:30 回答No.5

再掲です。表にして並べるのはIEの存在を無視できないので、サイズを指定したblockにしてfloatさせましょう。 HTML的にも無理がなく正しいマークアップになります。 <!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> ＿<h1>サンプル</h1> ＿<div class="album2"> ＿＿<ol> ＿＿＿<li style="background-image:url(./images/thumbnail/RIMG0002.jpg)"><span>フセ</span></li> ＿＿＿<li style="background-image:url(./images/thumbnail/RIMG0016.jpg)"><span>タテ</span></li> ＿＿＿<li style="background-image:url(./images/thumbnail/RIMG0021.jpg)"><span>コイ</span></li> ＿＿＿<li style="background-image:url(./images/thumbnail/RIMG0024.jpg)"><span>ツケ</span></li> ＿＿</ol> ＿</div> </body> </html>

質問者

お礼 2011/11/21 17:54

ご丁寧にありがとうございます。ソースをコピーさせていただいてやってみました。私の説明不足だと思います。失礼しました。私のソースを掲載し、もう一度質問します。またよろしければ教えてください。よろしくお願いします。

ログインすると、全ての回答が全文表示されます。

その他の回答 (4)

DrFell
ベストアンサー率55% (305/551)

2011/11/19 22:28 回答No.4

更に親があるようでしたら、親にｃｓｓを付加してください。便宜上 .tuketashi{display:table-row;} <div class="tuketashi"> <div class="imgs"> <a class="aaa" href="./pop.php"> <img class="imgtf" id="imgtf" alt="タイトル" src="images/thumbnail/eee.jpg"> </a> </div> </div>

質問者

お礼 2011/11/21 13:01

ご連絡ありがとうございます。付け足し助かります。やってみたのですが、IEでは動きません。他のものが邪魔をしているのですね。たぶん。。。もう一回きれいにしてからやってみます。

ログインすると、全ての回答が全文表示されます。

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/11/18 23:34 回答No.3

No.1です。 ★CSS★親ボックスの中で子ボックスを真ん中に。 - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7125049.html ) で、言い忘れていたのですが、IEはdisplay:の値にtabletable-cell,table0rowなどを設定するとうまく理解しないバグがあります。IE10でも直っていない部分があります。テーブルをスクロールさせるときのスクロールの位置 - HTML - 教えて！goo ( http://okwave.jp/qa/q7105490.html ) を参照してください。本来、画像のような置換インライン要素をline-heightの中央に置くのは無理があります。★CSS★親ボックスの中で子ボックスを真ん中に。 - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7125049.html )でお答えしたように、背景画像で設定しましょう。それでしたら、Opera,googleChrome,safari,firefoxは無論、IE5～IE10にも対応します。SEOとしても優れています。

質問者

お礼 2011/11/21 13:00

ご連絡ありがとうございます。 firefoxではOKですが、IEでは表示されませんでした。少し考えます

ログインすると、全ての回答が全文表示されます。

noname#158634

2011/11/18 20:33 回答No.2

http://www.htmq.com/style/vertical-align.shtml vertical-alignが有効な要素、適用範囲を確認してください。 ※以下お節介ですが。ある程度の期間、回数を投稿されているのですから、タイトルにカテゴリ名は必要ないこと (ましてカテゴリ名だけというのはどうかと)をそろそろ覚えてはいかがかと。