javascript - セクションの 2 列の中央に画像を配置する

Question

コードは今です：

HTML:

            <section class="sponsorSection">
                <div class="sponsorImageRow">
                    <div class="sponsorImageColumn">
                        <img src="img/kvadrat_logo.png" class="sponsorpicture1"/>
                    </div>
                    <div class="sponsorImageColumn">
                        <img src="img/small_vertical_logo.png" class="sponsorpicture2"/><br>
                    </div>
                </div>
                <div class="sponsorImageRow">
                    <div class="sponsorImageColumn">
                        <img src="img/long_vertical_logo.png" class="sponsorpicture1"/>
                    </div>
                    <div class="sponsorImageColumn">
                        <img src="img/logo4.png" class="sponsorpicture2"/><br>
                    </div>
                </div>
                <div class="sponsorImageRow">
                    <div class="sponsorImageColumn">
                        <img src="img/logo5.jpg" class="sponsorpicture1"/>
                    </div>
                </div>
            </section>   

CSS:

.sponsorSection{
    width: 480px;
    margin-top:30px;
    border:2px solid rgba(0, 0, 0, .2);
    border-radius: 5px;
}
.sponsorImageRow{
    height: 50px;
}
.sponsorImageColumn{
    width : 50% ;
    display: inline;
}
.sponsorpicture1{
    padding: 10px;
    max-width: 100%;
    max-height: 95%;
    height : auto;
    margin: 0 auto;
}
.sponsorpicture2{
    padding: 10px;
    max-width: 100%;
    max-height: 95%;
    height : auto;

    margin: 0 auto;
}

正しく見えませんが：

Answer 1

CSS に次の変更を加えます -

.sponsorImageColumn{
    width : 50% ;
    float : left; /*remove display property and use float as you want to set the width*/
}

これでクエリが解決することを願っています