【figureタグ】中央揃えにならない。

前提・実現したいこと

figureタグを使用して画像を2列2行で表示したい。
画像の間に10px程の空白を追加したい。
2列2行で表示することはできましたが、中央揃えにならない状況です。

該当のソースコード

HTML

<body>
    <div class="series_top" align="center">
        <img src="URL.png">
    </div>
    <div class="choice">
        <h1>title</h1>
        <p>2. <span class="under">希望の商品をご選択ください</span></p>
    </div>
    <div class="choice_img">
        <figure>
            <a href="javascript:location.replace('URL.html');">
                <img src="URL.png" />
                <figcaption>
                    <h2>Caption Title</h2>
                    <p>caption text here ...</p>
                </figcaption>
            </a>
        </figure>
        <figure>
            <a href="javascript:location.replace('URL.html');">
                <img src="URL.png" />
                <figcaption>
                    <h2>Caption Title</h2>
                    <p>caption text here ...</p>
                </figcaption>
            </a>
        </figure>
        <figure>
            <a href="javascript:location.replace('URL.html');">
                <img src="URL.png" />
                <figcaption>
                    <h2>Caption Title</h2>
                    <p>caption text here ...</p>
                </figcaption>
            </a>
        </figure>
        <figure>
            <a href="javascript:location.replace('URL.html');">
                <img src="URL.png" />
                <figcaption>
                    <h2>Caption Title</h2>
                    <p>caption text here ...</p>
                </figcaption>
            </a>
        </figure>
    </div>
    <div class="back">
        <a href="javascript:location.replace('URL.html');">
            <p>メインページに戻る</p>
        </a>
    </div>
</body>

CSS

.series_top img {
    width: 750px;
}

.series-table_a {
    margin-top: 20px;
}

.choice h1 {
    font-size: 35px;
    padding: 20px;
}

.choice p {
    font-size: 23px;
    text-align: center;
    padding-bottom: 20px;
}

.under {
    font-size: 20px;
    border-bottom: solid;
    border-width: 1px;
}

.choice {
    text-align: center;
    margin-bottom: 20px;
}

.back p {
    font-size: 20px;
    text-align: center;
}

.choice_img {
    position: relative;
    float: left;
    width: 800px;
    text-align: center;
}

.choice_img img {
    width: 380px;
}

figure {
    position: relative;
    overflow: hidden;
    float: left;
    width: 380px;
}

figcaption {
    position: absolute;
    bottom: 30px;
    right: 40px;
    z-index: 2;
    width: 100%;
    height: 60px;
    background: rgba(0, 0, 0, .6);
    -webkit-transition: .3s;
    transition: .3s;
}

figure:hover figcaption {
    right: 100%;
}

補足情報（FW/ツールのバージョンなど）

OS:windows10
visual studio code 1.41.1

macaron_xxx

2019/12/27 00:06

今日日、レイアウトはflexboxかgridをおすすめしたいですけどね。

omoti

2020/01/06 01:42

まだ右も左も分からない状態で「Flexboxは互換性が～」という記事を見たので、使用は控えていたのですが、今は問題ないのでしょうか？

macaron_xxx

2020/01/06 01:51

どのブラウザをサポートするかですけど。 https://caniuse.com/#feat=flexbox

omoti

2020/01/06 02:36

IE、Edge、Firefox、Chrome、Safariあたりをサポートできれば良いと思ってます。 9割以上の使用率ならば使用して問題ないような気がします。

macaron_xxx

2020/01/06 02:41

上記URLを見ていただければ一目瞭然ですよね。

omoti

2020/01/06 03:15

上記のようなサイトがあることを知らなかったので、勉強になりました。今後活用させていただきます。ありがとうございました！

行動規範の内容に同意します

回答2件

ベストアンサー

こんな感じですかね？

css
1.back { /* 修正 */
2  font-size: 20px;
3  text-align: center;
4  clear: both; /*追加*/
5}
6
7.choice_img {
8  position: relative;
9/*  float: left; */ 
10  margin: 0 auto;/*追加*/
11  width: 800px;
12  text-align: center;
13}
14
15figure {
16  position: relative;
17  overflow: hidden;
18  float: left;
19  width: 380px;
20  margin: 10px; /*追加*/
21}

投稿2019/12/26 10:53

総合スコア33699

2020/01/06 01:23

お返事遅くなって申し訳ございません。動作サンプルを確認させていただきました。画像の間にある空白もリンクが働いているようでクリックできてしまうのですが、これはどのように解決すれば良いでしょうか？

hatena19

2020/01/06 01:55

.back p { を .back { に変更するといいですね。回答とサンプルも修正しておきました。

omoti

2020/01/06 02:17

理想通りのページになりました！ありがとうございます。 clear: both;でfloatを解除したところまでは分かったのですが、何故空白のリンクも直ったのか後学のために教えていただけないでしょうか？

hatena19

2020/01/06 02:56

HTMLの要素のツリー構造は下記のようになっています。 .choice_img 　figure 　figure 　figure 　figure .back 　a 　　p figure にfloat: left; が設定されていますので左揃えになりそれ以降の要素は右側に回り込みます。ここで、p に clear: both; を設定して回り込みを解除すると、p要素は .choice_img の下に配置されますが、back と a は、回り込まないので.choice_img と p までも覆う範囲に配置されます。そのため、.back a のリンク範囲が .choice_img の範囲まで広がるということになります。 .back にclear: both; を設定すれば .back 以降は回り込まず .choice_img の下に配置されます。このように解釈していますが、複雑ですよね。 flexboxを使えばもう少し分かり安くなります。 IE9以前への対応を考えなくていいのならflexboxを使ってもいいと思います。

omoti

2020/01/06 03:14

詳細なご回答ありがとうございます！まだまだ分からない点が多いので、ひとつずつ噛み砕いて理解していきたいと思います。あと、flexboxの件も悩んでいたので一緒に解決できて良かったです。 IE9以前の対応などは特に考えていなかったので、flexboxも使っていきたいと思います。ありがとうございました！

行動規範の内容に同意します

こんな感じでどうですか？

css
1figure a {
2display: block;
3margin:0 auto;
4text-align:center;
5width: 380px;
6}

投稿2019/12/26 08:34

編集2019/12/26 09:33

madone99

総合スコア1855

azuapricot

2019/12/26 09:08

動作確認しました？

omoti

2020/01/06 01:18

お返事遅くなって申し訳ございません。ご回答ありがとうございました！参考にさせていただきます。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！