横に並んだ画像の固まりをセンター

解決済

質問者：isi999
質問日時：2013/12/30 22:30
回答数：2件

下記CSSでキャプション付き画像を横向きに並べて配置したのですが
横に並んだ画像の固まりをセンターにもっていくCSSがわかりません
どなたか知りませんか？

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<style type="text/css">

</style>

</head>
<body>

<div class="imagebox_a">
<div class="imagebox">
<p class="image"><img src="./photo.jpg" width="140" height="95" alt="海の写真"></p>
<p class="caption">キャプションですよ</p>
</div>
<div class="imagebox">
<p class="image"><img src="./photo.jpg" width="140" height="95" alt="海の写真"></p>
<p class="caption">キャプションですよ</p>
</div>
<div class="imagebox">
<p class="image"><img src="./photo.jpg" width="140" height="95" alt="海の写真"></p>
<p class="caption">キャプションですよ</p>
</div>
<div class="imagebox">
<p class="image"><img src="./photo.jpg" width="140" height="95" alt="海の写真"></p>
<p class="caption">キャプションですよ</p>
</div>
</div>

</body>
</html>

通報する

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

質問の本文を隠す

回答 (2件)

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

No.1ベストアンサー

回答者： rooooooon
回答日時：2013/12/30 23:16

クラス「.imagebox_a 」に横幅指定がないので

width:●●px;というのを追加すれば真ん中に寄ります

（例）

.imagebox_a {
width:800px;
display: block;
margin-left: auto;
margin-right: auto;

}

.imagebox_aが適用されている<div>はブロックレベル要素なので
横何pxなのか指定がなければ自動的に
右端～左端一杯にその枠が設置されてしまいますので。
800pxというのは適当に入れたので適宜変えて下さい。

- 0
- 件

通報する

No.2

回答者： ORUKA1951
回答日時：2013/12/31 12:02

もっと簡潔に書かなきゃメンテナンスに困りますよ。

class名は文書構造を示す物にしておくと、先で他のデザイン・・ボックスじゃなくリスト・・・にしたいときなど混乱しなくてすむ。
★darkblueは値として使えません。
　aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )の17色です。
★タブは＿に置換してあるので戻す。

<div class="photoAlbum">
＿<div class="figure">
＿＿<img src="./photo.jpg" width="140" height="95" alt="海の写真">
＿＿<div class="figcaption">キャプションですよ</div>
＿</div>
＿<div class="figure">
＿＿<img src="./photo.jpg" width="140" height="95" alt="海の写真">
＿＿<div class="figcaption">キャプションですよ</div>
＿</div>
＿<div class="figure">
＿＿<img src="./photo.jpg" width="140" height="95" alt="海の写真">
＿＿<div class="figcaption">キャプションですよ</div>
＿</div>
＿<div class="figure">
＿＿<img src="./photo.jpg" width="140" height="95" alt="海の写真">
＿＿<div class="figcaption">キャプションですよ</div>
＿</div>
＿<div class="figure">
＿＿<img src="./photo.jpg" width="140" height="95" alt="海の写真">
＿＿<div class="figcaption">キャプションですよ</div>
＿</div>
</div>
div.photoAlbum{
width:486px;margin:0 auto;
fontt-size:0.8em;
color:navy;
text-align:center;
background-color:yellow;
}
div.photoAlbum div.figure{/* アルバム中の挿絵 */
width:140px;height:140px;
margin:5px;padding:5px;
border:navy 1px dashed;
float:left;
background-color:rgb(238,238,255);
}
div.photoAlbum div.figure div.figcaption{/* 挿絵のキャプション */
text-indent:1em;text-align:left;
}
div.photoAlbum:after{
content:"";
display:block;
clear:left;
}

[HTML5]の場合。
<div class="photoAlbum">
＿<figure>
＿＿<img src="./photo.jpg" width="140" height="95" alt="海の写真">
＿＿<figcaption>キャプションですよ</figcaption>
＿</figure>
＿<figure>
＿＿<img src="./photo.jpg" width="140" height="95" alt="海の写真">
＿＿<figcaption>キャプションですよ</figcaption>
＿</figure>
＿<figure>
＿＿<img src="./photo.jpg" width="140" height="95" alt="海の写真">
＿＿<figcaption>キャプションですよ</figcaption>
＿</figure>
＿<figure>
＿＿<img src="./photo.jpg" width="140" height="95" alt="海の写真">
＿＿<figcaption>キャプションですよ</figcaption>
＿</figure>
＿<figure>
＿＿<img src="./photo.jpg" width="140" height="95" alt="海の写真">
＿＿<figcaption>キャプションですよ</figcaption>
＿</figure>
</div>
div.photoAlbum{
width:486px;margin:0 auto;
fontt-size:0.8em;
color:navy;
text-align:center;
background-color:yellow;
}
div.photoAlbum figure{
width:140px;height:140px;
margin:5px;padding:5px;
border:navy 1px dashed;
float:left;
background-color:rgb(238,238,255);
}
div.photoAlbum figure figcaption{
text-indent:1em;text-align:left;
}
div.photoAlbum:after{
content:"";
display:block;
clear:left;
}