- ベストアンサー
横に並んだ画像の固まりをセンターに配置する方法
- 下記CSSでキャプション付き画像を横向きに並べて配置したのですが、横に並んだ画像の固まりをセンターにもっていくCSSがわかりません。どなたか知りませんか？
- HTMLの中で、キャプション付き画像を横に並べたい場合、下記のCSSを使用することができます。しかし、画像の固まりをセンターに配置する方法がわかりません。解決方法を教えてください。
- キャプション付き画像を横に並べて配置するために、上記のCSSを使用しましたが、画像が横一列に並んでしまいました。画像の固まりをセンターにもっていくCSSの方法を教えてください。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
クラス「.imagebox_a 」に横幅指定がないので width:●●px;というのを追加すれば真ん中に寄ります （例） .imagebox_a { width:800px; display: block; margin-left: auto; margin-right: auto; } .imagebox_aが適用されている<div>はブロックレベル要素なので 横何pxなのか指定がなければ自動的に 右端～左端一杯にその枠が設置されてしまいますので。 800pxというのは適当に入れたので適宜変えて下さい。
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
もっと簡潔に書かなきゃメンテナンスに困りますよ。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/CSS21/syndata.html#color-units )の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; }
