★CSS★親ボックスの中で子ボックスを真ん中に。

解決済

質問者：a-----n
質問日時：2011/11/10 17:06
回答数：3件

ＣＳＳの質問です。
.imgs imgが真ん中に表示されません。
どうしてでしょうか・・・？

.imgs {
height: 160px;
width: 160px;
position:relative;
}
.imgs img {
position:absolute;
vertical-align:middle;
}
よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： yambejp
回答日時：2011/11/10 18:16

＞vertical-align:middle;

は、テーブルのセルにしか通用しませんよ
それ以前にもし有効だとしてもalign指定するのはその親要素にでしょう？
今回のケースではあまり推奨されませんが、display:table-cell
をつかってみるとか・・・

<style>
.imgs {
display:table-cell;
height: 160px;
width: 160px;
background-Color:red;
text-align:center;
vertical-align:middle;
}
</style>
<div class="imgs">
<img src="1.jpg">
</div>

とすると、縦横でセンタリングします。

- 0
- 件

通報する

No.3

回答者： ORUKA1951
回答日時：2011/11/10 19:43

忘れてた。

添付画像はLynxで確認したもの

なお、質問で「親ボックスの中で子ボックスを真ん中に。」と書かれていますが、imag要素はブロックではありません。行内要素です。
　display:block;
と指定しなおしても、中央配置はややこしくなるので、親要素をtableに、子要素をtable-cellにするか、背景で指定するのが良いでしょう。
　いずれがよいかは、HTMLの文書構造で決めてください。

- 0
- 件

通報する

この回答へのお礼

たびたびご丁寧にありがとうございます。
助かりました。

通報する

お礼日時：2011/11/11 11:17

No.2

回答者： ORUKA1951
回答日時：2011/11/10 19:30

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. … )
※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">

＿</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>