- ベストアンサー
★CSS★親ボックスの中で子ボックスを真ん中に。
ＣＳＳの質問です。 .imgs imgが真ん中に表示されません。 どうしてでしょうか・・・？ .imgs { height: 160px; width: 160px; position:relative; } .imgs img { position:absolute; vertical-align:middle; } よろしくお願いします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTMLがどのように書かれているかわからないのですが、 vertical-alignは、table-cellにのみ有効なプロパティです。 したがって、画像を縦巾の中央に配置するなら、 1)親コンテナブロックをtable-cellにする 2)親ブロック内で画像を画像サイズに合わせてひとつずつ位置を指定する。 親要素をrelativeにしてabsoluteで配置するのが簡単 3)背景画像として指定する。 下記は、(1)と(3)のサンプルです。いずれもLynxでは同じに見えます。≒検索エンジンでは同じに読み取ってくれます。 ※Another HTML-lint gateway( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ※The W3C Markup Validation Service( http://validator.w3.org/#validate_by_input ) で検証済み。 ★タブは＿に置換してあります。戻して確認してください。 <!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.album ol,div.album ol li{ ＿display:block;list-style:none; ＿margin:0;padding:0; ＿border-spacing:10px; } div.album ol li{ ＿width:100px;height:100px; ＿border:solid 1px blue; ＿text-align:center; } div.type1 ol li{ ＿display:table-cell; ＿vertical-align:middle; } div.type2 ol li{ ＿float:left; } div.type2 ol li{ ＿background-position:50% 50%; ＿background-repeat:no-repeat; ＿margin:5px; } div.type2 ol li span{ ＿display:none; } --> ＿</style> </head> <body> ＿<h1>サンプル</h1> ＿<div class="album type1"> ＿＿<ol> ＿＿＿<li><img src="./images/thumbnail/RIMG0002.jpg" width="80" height="68" alt="フセ"></li> ＿＿＿<li><img src="./images/thumbnail/RIMG0016.jpg" width="80" height="51" alt="タテ"></li> ＿＿＿<li><img src="./images/thumbnail/RIMG0021.jpg" width="80" height="50" alt="コイ"></li> ＿＿＿<li><img src="./images/thumbnail/RIMG0024.jpg" width="80" height="48" alt="ツケ"></li> ＿＿</ol> ＿</div> ＿<div class="album type2"> ＿＿<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>
お礼
ご丁寧にありがとうございます。 お手数をおかけしました。 勉強になりました。 ありがとうございました。
お礼
たびたびご丁寧にありがとうございます。 助かりました。