Question

我正在尝试水平对齐这些图像，但它无法正常工作。我试过浮动它们并使用内联块CSS，但我想我只是缺少一些简单的东西。

<div class="footer-bottom"> 
    <div class="footer-container">

       Gold Sponsors<br />
       <img src="http://placehold.it/350x150">
       <img src="http://placehold.it/140x100">
       <img src="http://placehold.it/350x150">
       <img src="http://placehold.it/140x100"><br />
       Silver Sponsors<br />
       <img src="http://placehold.it/350x150">
       <img src="http://placehold.it/140x100">
       <img src="http://placehold.it/350x150">
       <img src="http://placehold.it/140x100"><br />

    </div>
</div>

<style>
   .footer-container {
       width: 120px;
       height: 72px;
       display: inline-block;
   }

   /* resize images */
   .footer-container img {
       width: 100%;
       height: auto;
   }

</style>

Answer 1

我不确定你想做什么，所以我将提供两个答案。

1）如果要水平分发图片，则需要两件事。首先，让footer-bottom更大。现在，它太小了，不适合多张图片。我将此容器的宽度更改为auto，以适应屏幕的宽度。

.footer-bottom {
  width: auto;
  background-color: #f1f1f1;
}

/* resize images */
.footer-container img {
  width: 50px;
  height: auto;
}

<div class="footer-bottom"> 
    <div class="footer-container">

       Gold Sponsors<br />
       <img src="http://placehold.it/350x150">
       <img src="http://placehold.it/140x100">
       <img src="http://placehold.it/350x150">
       <img src="http://placehold.it/140x100"><br />
       Silver Sponsors<br />
       <img src="http://placehold.it/350x150">
       <img src="http://placehold.it/140x100">
       <img src="http://placehold.it/350x150">
       <img src="http://placehold.it/140x100"><br />

    </div>
</div>

如果您想要对图片进行水平对齐，例如将图片居中，只需将margin-left和margin-right .footer-container设置为auto。

.footer-container {
   width: 120px;
   height: 72px;
   margin-left: auto;
   margin-right: auto;
}

 /* resize images */
.footer-container img {
   width: 100%;
   height: auto;
}

<div class="footer-bottom"> 
    <div class="footer-container">

       Gold Sponsors<br />
       <img src="http://placehold.it/350x150">
       <img src="http://placehold.it/140x100">
       <img src="http://placehold.it/350x150">
       <img src="http://placehold.it/140x100"><br />
       Silver Sponsors<br />
       <img src="http://placehold.it/350x150">
       <img src="http://placehold.it/140x100">
       <img src="http://placehold.it/350x150">
       <img src="http://placehold.it/140x100"><br />

    </div>
</div>

Answer 2

这应该适合你：

.footer-container {
    position: relative;
    margin: 0 auto;
    width: 120px;
    height: 72px;
}

FIDDLE：https://jsfiddle.net/3fb6msvm/

在div中水平对齐图像

2 个答案: