display: flexで横並びにすると左に寄ってしまう。

Question

display: flaxで横並びにした画像が左に寄ってしまうので、左右の隙間を空けつつ、等間隔で並べたいです。

 <div class="gallery">
            <div id="about" class="about_gallery">
                <h1>【 gallery 】</h1>
            </div>
        <ul>
            <li><img src="images/イラスト9.png" alt="小日向イカちゃん">
                <h1>小日向イカちゃん</h1></li>
            <li><img src="images/aka.jpg" alt="ボールペン画">
                <h1>赤の女の子</h1></li>
            <li><img src="images/魔法イカちゃん.png" alt="魔法イカちゃん">
                <h1>魔法イカちゃん</h1></li>
        </ul>
        </div>

#main,.gallery {
    background-color: #151526;
}
.gallery ul {
    position: relative;
    justify-content: center;
    display: flex;
    width: 100%;
    padding-top: 120px;
}
.gallery li {
    display: block;
    width: 100%;
    font-size: 2vw;
    color:rgb(255, 255, 255);
}
.gallery img {
    object-fit: contain;
}

ブラウザでの表示は以下のような感じで、左に寄っています。

marginやpaddingでの設定は試しましたが、無効化されています。
お力添えお願い致します。

Answer 1

flex で横並びにしているなら justify-content: space-around; を加えてあげればよいかと思います。

Comments

[chaco0o0o]

加えてみましたが、変わらずでした・・・。

[agumon]

li に width: 100%; がかかっているのでそれ外したらどうでしょうか。

[chaco0o0o]

3枚目（一番右）の画像が小さく表示されてしまいます。

[agumon]

質問に対しての期待された動作は満たしているかと思いますのであとは調整次第だと思います。

Answer 2

左に寄っているのは、li要素の内容(画像と見出し)ですから、text-align: center;を付けてやればいいのでは。
修正分: width: 100%;を削除。h1要素の見出しより画像の幅が広ければ、これでli要素の幅は画像とほぼ一致するようになる。

.gallery li {
    display: block;
-   width: 100%;
    font-size: 2vw;
    color: rgb(255, 255, 255);
+   text-align: center;
+   /* border: red solid 1px; */ /* 確認用 */
}

もし、質問文に書かれていない部分でマージンやパディングのリセットを行なっていないのであれば、ul要素の左側のパディングも0にしてください。
修正分: li要素の横幅を狭くしたことで生まれる隙間を、justify-content: space-evenly;で均等に配置。これで、左端、中央左、中央右、右端の4箇所の隙間がすべて同じ幅になる。もし、中央左と中央右の隙間を左右端の隙間の2倍取りたいのであれば、値をspace-aroundに変更すること。

.gallery ul {
    position: relative;
    justify-content: center;
    display: flex;
    width: 100%;
    padding-top: 120px;
+   padding-left: 0;
+   justify-content: space-evenly;
}

さらに追加:
画像の実サイズが「2200x1900」「1472x1664」「1000x1100」と、画面サイズに対してかなり大きいことが判明したので、実サイズによらず画面の幅に対して一定の割合で表示するようにする。

.gallery img {
-   object-fit: contain;
+   width: 25vw;
}

Comments

[chaco0o0o]

ありがとうございます！加えてみたところ、一番左に余白ができました！
ただ、左の余白に比べて右の余白が大きいです。
原因としては右の画像が縦長の為余白が多いように見えてしまうのだと思いますが、どのように設定すれば改善されるでしょうか？

[Daregada]

回答に「確認用」とコメントが書いてある「border: red solid 1px;」の前後の「/*」と「*/」を削除すると、それぞれのli要素に赤い枠線が表示されます。
さらに、「.gallery ul」の{}内にも「border: green solid 1px;」を追加すると、ul要素に緑の枠線が表示されます。

その上で、その「右の余白」がどの部分にあるのか教えてください。

もし、緑の枠線の外側にあるのなら、
.gallery {
border: yellow solid 1px;
}
をCSSに追加して、「右の余白」が黄色い枠線の内か外のどちらにあるのかも教えてください。

[chaco0o0o]

赤枠は緑枠の内側にあり、赤枠の内側に余白があります。赤枠が３つとも正方形なのに対して1枚目の画像は横長で２、３枚目は縦長なのでそこで余白の差が出来ている感じです。
伝え方下手で申し訳ないです・・・。

[Daregada]

質問に含まれる画像は、実際に使っている画像ではないってことですよね?
3つの画像のおおよそのサイズを提示してください。

そして、あなたが実際にやりたいことは「li要素(赤い枠)を同じ幅にする」ことではなく、「画像の周囲の隙間をすべて同じ幅にする」ということでいいのかな?

[chaco0o0o]

質問文にあるコードは全て実際に使っているものです。画像も使っています。
画像のサイズは左から2200×1900、1472×1664、1000×1100pxです。

その解釈で間違いないです。

[chaco0o0o]

ありがとうございます！正直ここまできっちりと理想の回答が出てくるとは思わなかったので感激しております。