急いでいます！

html、センター表示にならない！レスポンシブ対応！

解決済

質問者：nhy6
質問日時：2018/01/24 12:19
回答数：1件

下記のようなコードで作成しているんですが、画像がセンター表示にならないです。画面サイズが小さくなると左によってしまいます。原因を教えて下さい。
<style>
.wrapper3 {
max-width: 1100px;
margin: 0 auto;
align: center;
background: #fff;
padding: 20px;
}

.wrapper2 {
max-width: 890px;
margin: 0 auto;
align: center;
background: #fff;
padding: 15px;
}

.wrapper {
max-width: 550px;
margin: 0 auto;
text-align: center;
background: #fff;
padding: 15px;
}
.txt {
display: inline-block;
text-align: left;
letter-spacing: 3px;
font-size:12px;
line-height: 200%;
}

.sample1 {
width: 270px;
height: 270px;
overflow: hidden;
margin: 8px 8px 10px 16px;
position: relative; /* 相対位置指定 */
}
.sample1 .caption {
font-size: 110%;
text-align: center;
padding-top: 80px;
color: #000;
}
.sample1 .mask {
width: 100%;
height: 100%;
position: absolute; /* 絶対位置指定 */
top: 0;
left: 0;
opacity: 0; /* マスクを表示しない */
background-color: rgba(255,255,255,0.3); /* マスクは半透明 */
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
align: center;
}
.sample1:hover .mask {
opacity: 2; /* マスクを表示する */
}

.yoko{

float:left;/* 横並びにする */
}

.clear{display:none;}

</style>
<DIV align="center">
<br>
<strong><span style="color:#000000"><span style="font-size:15px;">ＢＲＡＳＳ</span></span></strong>
<br><br>
<IMG src="https://img21.shop-pro.jp/PA01398/639/etc/303095 … border=" 0"><br><br><br>
<SPAN style="color:#000000"></SPAN>
<DIV class="wrapper" style="margin-top: 50px;">
<p class="txt"><SPAN style="color:#000000"><br>
<br>

<br>
できれば、過ぎゆく時の流れを感じる喜びも、一緒に味わっていきたい。
</SPAN></p>
</DIV>
<SPAN style="color:#000000"><br>
<br>
</SPAN>
<DIV class="carousel-slide section__block">
<div class="wrapper2" style="margin-top: 10px;">
<div class="yoko">
<DIV class="sample1" align="center"><SPAN style="color:#000000"><A href="http://www.hornplease.shop/?pid=126295174"><IMG alt="ブラス1" src="https://img21.shop-pro.jp/PA01398/639/etc/th_303 … cmsp_timestamp=20171226170822" width="270" height="270" style="margin: 10px;">
</A></SPAN>
<DIV class="mask">
<div class="caption"><SPAN style="color:#000000"><A href="http://www.hornplease.shop/?pid=126295174">BRASS …
</DIV>
</DIV>
<SPAN style="color:#000000"></SPAN></div>
<div class="yoko">
<DIV class="sample1" align="center"><SPAN style="color:#000000"><A href="http://www.hornplease.shop/?pid=126286108"><IMG alt="ブラス2" src="https://img21.shop-pro.jp/PA01398/639/etc/th_303 … width="270" height="270" style="margin: 10px;">
</A></SPAN>
<DIV class="mask">
<div class="caption"><SPAN style="color:#000000"><A href="http://www.hornplease.shop/?pid=126286108">BRASS …
</DIV>
</DIV>
<SPAN style="color:#000000"></SPAN></div>
<div class="yoko">
<DIV class="sample1" align="center"><SPAN style="color:#000000"><A href="http://www.hornplease.shop/?pid=126082891"><IMG alt="ブラス3" src="https://img21.shop-pro.jp/PA01398/639/etc/th_303 … width="270" height="270" style="margin: 10px;">
</A></SPAN>
<DIV class="mask">
<div class="caption"><SPAN style="color:#000000"><A href="http://www.hornplease.shop/?pid=126082891">BRASS …
</DIV>
</DIV>
</div>
</DIV>
</DIV>
</DIV>

宜しくお願いします。

通報する

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

質問の本文を隠す

回答 (1件)

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

参考程度に

No.1ベストアンサー

回答者： fujillin
回答日時：2018/01/24 18:20

こんにちは

＞画面サイズが小さくなると左によってしまいます。
上段の大きな画像のことなのか、下段の画像のことなのかわかりませんが、親要素に対してセンタリングしていても、内容の幅が入りきらない場合は左寄せで表示されるからでしょうね。
下段の画像の場合はfloatなので、一部の画像が繰り下げられた場合は左寄せになります。

最終的にどうなさりたいのか不明ですが、上段については以下の2種類を考えてみました。
1）画像サイズは変わらずに、センタリングで表示する。
　（左右が切り取られて、中央部分が表示される）
2）画面サイズが画像幅より小さくなったら、画像を縮小し、センタリング表示する。
　（縮小の際は画面幅になるので、センタリングというわけでもないですが…）

下段については、常にセンタリングして、画面幅が画像幅よりも小さくなった際はそれに応じて縮小するというものにしてあります。

※ ご提示のHTMLは不要な部分が多いようで、どこまでが本当に必要なタグなのかわからないので、考え方のみのサンプルということで簡略化してあります。
※ また、アニメーションはご質問とは関係ないので省略しています。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style type="text/css">
#test1, #test1 * { margin: 0; padding: 0; }
#test1 { text-align: center; position:relative; }
#test1 p { margin: 0.3em; }
#test1 p:nth-child(2n) { margin-bottom: 2em; }

#test1 p:first-child { height: 500px; }
#test1 p:first-child img { position: absolute; left: 50%; margin-left: -350px; }
#test1 p:nth-child(3) img { max-width: 100%; height: auto; }

#test2, #test2 * { margin: 0; padding: 0; }
#test2 { margin-top: 2em; }
#test2 { display: flex; justify-content: center; flex-wrap: wrap; }
#test2 figure { position: relative; width: 270px; margin: 10px; }
#test2 figurecaption {
position: absolute; top: 0; left: 0;
width: 100%; height: 100%; padding-top: 25%; text-align: center;
background-color: rgba(255,255,255,0.3); opacity: 0;
}
#test2 img { width: 100%; height:auto; }

#test2 figure:hover figurecaption { opacity: 1; }
</style>
</head>
<body>

<div id="test1">
<p><img src="https://img21.shop-pro.jp/PA01398/639/etc/303095 … alt=""></p>
<p>サイズを変えずに常に中央表示</p>

<p><img src="https://img21.shop-pro.jp/PA01398/639/etc/303095 … alt=""></p>
<p>画面サイズに応じて縮小</p>
</div>

<hr />

<div id="test2">
<figure>
<img alt="ブラス1" src="https://img21.shop-pro.jp/PA01398/639/etc/th_303 …
<figurecaption><a href="#">1111111</a></figurecaption>
</figure><figure>
<img alt="ブラス2" src="https://img21.shop-pro.jp/PA01398/639/etc/th_303 …
<figurecaption><a href="#">2222222</a></figurecaption>
</figure><figure>
<img alt="ブラス3" src="https://img21.shop-pro.jp/PA01398/639/etc/th_303 …
<figurecaption><a href="#">3333333</a></figurecaption>
</figure>
</div>

</body>
</html>