- ベストアンサー
CSSに関する質問：display:table-cell;がIEで効かない場合のミドル配置方法
- CSSを使用して画像をミドルに配置する方法について質問があります。
- firefoxではdisplay:table-cell;というプロパティを使用することで、画像をミドルに配置することができましたが、IEではこの方法がうまく機能しませんでした。
- IEでも画像をミドルに配置する方法があれば教えていただきたいです。
- みんなの回答 （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"> <!-- /* display:block */ div.album2 ol,div.album2 ol li{ ＿display:block;list-style:none; ＿margin:0;padding:0; ＿border-spacing:10px; } div.album2 ol li{ ＿width:100px;height:100px; ＿border:solid 1px blue; ＿text-align:center; ＿float:left; ＿background-position:50% 50%; ＿background-repeat:no-repeat; ＿margin:5px; } div.album2 ol li span{ ＿display:none; } --> ＿</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>
その他の回答 (4)
- DrFell
- ベストアンサー率55% (305/551)
更に親があるようでしたら、親にｃｓｓを付加してください。便宜上 .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><!-- ●付け足しました●-->
お礼
ご連絡ありがとうございます。 付け足し助かります。 やってみたのですが、IEでは動きません。 他のものが邪魔をしているのですね。たぶん。。。 もう一回きれいにしてからやってみます。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
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としても優れています。
お礼
ご連絡ありがとうございます。 firefoxではOKですが、IEでは表示されませんでした。 少し考えます
http://www.htmq.com/style/vertical-align.shtml vertical-alignが有効な要素、適用範囲を確認してください。 ※以下お節介ですが。 ある程度の期間、回数を投稿されているのですから、タイトルにカテゴリ名は必要ないこと (ましてカテゴリ名だけというのはどうかと)をそろそろ覚えてはいかがかと。
お礼
ご指摘ありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
★CSS★親ボックスの中で子ボックスを真ん中に。 - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7125049.html ) で回答しましたが・・・ HTML的には、ナビゲーションリストとしてマークアップするほうがよいとも・・
お礼
ご連絡ありがとうございます。 一度ご回答いただいていたみたいで失礼しました
お礼
ご丁寧にありがとうございます。 ソースをコピーさせていただいてやってみました。 私の説明不足だと思います。 失礼しました。 私のソースを掲載し、もう一度質問します。 またよろしければ教えてください。 よろしくお願いします。