Javascript 将图像居中放置在剖面的两列内

代码现在是：

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进行以下更改-

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

---

希望这能解决您的问题

我不确定，我是否正确理解您要求的定位，但如果我查看您的代码，您希望您的图像水平居中吗？因为图像是默认的内联元素，所以边距：0自动将不被考虑。试着这样做：

/* 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语法显示：表、表行等，以使用其他html元素模拟经典表。

如果您发现自己使用

div

s来模拟

表的功能，那么使用表可能是更好的选择。
尤其是在使用表格数据时。我不是100%确定你所做的实际上是表格数据，而是你使用了“行”和“列”这两个词给我一个这样的想法。请解释你们的否决票。我没有否决票，但我猜你们收到的否决票是因为你们的问题不包含一个以问号结尾的实际具体问题。你们只说了几件事，并没有具体要求。谢谢：）虽然我认为这个标题很明显地表明了我的意图。
/* 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;
}