• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:★CSS★)

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

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

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

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答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"> <!-- /* 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>

a-----n
質問者

お礼

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

その他の回答 (4)

  • DrFell
  • ベストアンサー率55% (305/551)
回答No.4

更に親があるようでしたら、親にcssを付加してください。便宜上 .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><!-- ●付け足しました●-->

a-----n
質問者

お礼

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

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答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としても優れています。

a-----n
質問者

お礼

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

noname#158634
noname#158634
回答No.2

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

a-----n
質問者

お礼

ご指摘ありがとうございました。

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

★CSS★親ボックスの中で子ボックスを真ん中に。 - Webデザイン・CSS - 教えて!goo ( http://okwave.jp/qa/q7125049.html ) で回答しましたが・・・ HTML的には、ナビゲーションリストとしてマークアップするほうがよいとも・・

a-----n
質問者

お礼

ご連絡ありがとうございます。 一度ご回答いただいていたみたいで失礼しました

関連するQ&A

専門家に質問してみよう