複数の画像(<img>)を横に並べてその中央を画面の中央に合わせて画面下に表示

Question

複数の<img>を画面の中央に横に並べたいと考えています。
display: inline-block;にすると margin: 0 auto;が効かず、
display: block;にすると勝手に改行されます…

実際のソースはこんな感じです…

<div class="buttons">
       <a href=""><img src="image/1.png"/></a>
       <a href=""><img src="image/2.png"/></a>
</div>

.buttons{
    
    display: block;
    position: absolute;
    
    width: 100%;

    bottom: 70px;
    
    z-index: 4;
    
}
.buttons a{
    /* ここで改行される */
    display: block;
    
    position: relative;
    
    /* ここで中央寄せ */
    margin: 0 auto;
    
    width: 30%;
    max-width: 400px;
    min-width: 200px;
    padding-top: 20px;
    
}
.buttons img{
    display: block;
    
    width: 100%;
    max-width: 400px;
    min-width: 200px;
    
    /*border-radius: 10px;*/
}

画像はウィンドウの幅によって制限付きで可変なので、そこも考慮して、どうしたらよいか教えていただけると助かります。

Answer 1

a要素が.buttonsの中で左右中央に横並びになり、かつそれ自身のサイズも指定したいのであれば、
a要素→inline-block、.buttons→text-align:center で実現できますよ。

a要素同士の間に半角スペースが空いてしまうのが嫌であれば、
HTML側の改行コードを削除して1行にするか、改行コードをコメントで挟んでやればぴったりくっつきます。

他にもやり方はありますが、一番単純な方法はこちらでしょう。

Comments

[luma]

回答ありがとうございますす。
inline-blockにするとブロックと違って、テキストとして扱えるんですね…
勉強になりました！