CSSセンターイメージ水平方向のインラインの動的幅親

の幅のある画像を水平方向に中央に配置しようとしています。幅は100%です。現在のところ、どちらの側にも、float: left;とfloat: right;というプロパティを持つボタンとして機能する2つの画像があります。CSSセンターイメージ水平方向のインラインの動的幅親

私が試したすべての解決策は、画像をdisplay: blockとすると言いましたが、どちらの側にもボタンが表示されません。

ここに私の現在のコードのCodepen Exampleがあります。クラスmainimgの画像を、div内のクラスmainで中央に配置しようとしています。

どのように私はそのイメージの中心になるのでしょうか？

FIRSTあなたの山車を置く： ''

、基本的に。 –

左右の要素の幅が同じでない場合は、絶対配置を使用する必要があります。 –

@MarcBどのように役立つか正確にはわかりません。その中心に置かれたイメージは、その点でどのように中心を置くことがわかりますか？ –

使用フレキシボックスと、このような.mainのためにあなたのCSSルールを変更します。

.main { 
    display: flex; 
    justify-content: space-between; 
    background: black; 
    height: 550px; 
}

display: flex;justify-content: space-between;は外側のアイテムが外部の位置に残っていることを確認し、幅を横切って3つのアイテムを配布します。

2016-10-14 19:59:15 Johannes

左と右の要素**が同じサイズ**の場合、これは中央のアイテムのみを中心にしています。 –

はい、これがこの場合に当てはまることは明らかでした（同じ矢印イメージ）。 – Johannes

答えて