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*/
}

希望这能解决您的查询

Answer 2

我不确定，如果我正确理解了您要求的定位，但是如果我查看您的代码，您是否希望您的图像水平居中？由于 image 默认情况下是一个内联元素，因此不会考虑 margin:0 auto。尝试这样的事情：

/* keep it as a block element, not inline */
.sponsorImageColumn {
    width : 50% ;
    float:left;
    display: block;
}
/* and image also as a block element */
.sponsorSection img {
    display:block;
}

我整理了一个小小提琴来演示。对于更复杂的定位，您可以查看 css-syntax display: table, table-row 等，以模拟带有其他 html 元素的经典表格。