4张图片漂浮在中心

Question

我很难过。我希望我的横幅像这样。

但是我的输出是这样的。

 #banner-sp{
    display: block;
}

#banner1 img{
    padding-bottom: 10px;
}

.ban1, .ban2{
    float: right;
    margin-left: auto;
    margin-right: auto;
}

<div class="container" id="banner-sp">
	<div class="row" id="banner1">
		<a href="#"><img src="http://placekitten.com/200/300"></a>
		<a href="#"><img src="http://placekitten.com/200/300" class="ban1"></a>
	</div>
	<div class="row" id="banner2">
		<a href="#"><img src="http://placekitten.com/200/300"></a>
		<a href="#"><img src="http://placekitten.com/200/300" class="ban2"></a>
	</div>
</div>

Answer 1

您可以通过以下CSS实现它：

使用padding上的img控制图片之间的距离。

banner-sp{
        display: block;
    }

    img{
        padding: 10px;
    }

.row {
  display: flex;
  justify-content: center;
}

<div class="container" id="banner-sp">
	<div class="row" id="banner1">
		<a href="#"><img src="http://placekitten.com/200/300"></a>
		<a href="#"><img src="http://placekitten.com/200/300" class="ban1"></a>
	</div>
	<div class="row" id="banner2">
		<a href="#"><img src="http://placekitten.com/200/300"></a>
		<a href="#"><img src="http://placekitten.com/200/300" class="ban2"></a>
	</div>
</div>

Answer 2

似乎您正在使用引导程序。引导类很容易解决问题。但是可以手动解决此问题。 我用虚拟图像替换了图像路径。仅用于更好的预览。

    #banner-sp{
       display: block;
    }

    #banner1 img{
       padding-bottom: 10px;
    }
   .row a{
      margin:0 5px;
      display:inline-block;
   }

<div class="container" id="banner-sp">
        <div class="row" id="banner1">
            <a href="#"><img src="https://dummyimage.com/200x100/a6a4a6/fff"></a>
            <a href="#"><img src="https://dummyimage.com/200x100/a6a4a6/fff" class="ban1"></a>
        </div>
        <div class="row" id="banner2">
            <a href="#"><img src="https://dummyimage.com/200x100/a6a4a6/fff"></a>
            <a href="#"><img src="https://dummyimage.com/200x100/a6a4a6/fff" class="ban2"></a>
        </div>
</div>

Answer 3

尝试一下

#banner-sp{
    display: inline-block;
    width: 100%;
}

#banner1, #banner2{
    text-align: center;
}

 #banner1 img, #banner2 img {
   margin: 10px
}

<div class="container" id="banner-sp">
	<div class="row" id="banner1">
		<a href="#"><img src="http://placekitten.com/200/300"></a>
		<a href="#"><img src="http://placekitten.com/200/300" class="ban1"></a>
	</div>
	<div class="row" id="banner2">
		<a href="#"><img src="http://placekitten.com/200/300"></a>
		<a href="#"><img src="http://placekitten.com/200/300" class="ban2"></a>
	</div>
</div>