如何将两个div移动/堆叠在一起时居中？

Question

请注意，是的，这里有类似的问题，但我尝试了他们提到的解决方案，但仍然无法让我的物品居中。我卡住了文本对齐：center，display：inline-block;保证金：0自动和宽度：100％在多个地方，我仍然无法让项目显示居中。

O.k.有了这样的方式，这里是代码，然后解释如下：

<h4 style="margin-bottom:-15px"><strong>The Item Item Below:</strong></h4> 
    <img style="float:left;width:100%; max-width: 408px; height:100%; max-height: 134px; background-color:red; margin-top:40px; margin-right:20px" 

     src="http://s25.postimg.org/kbrcsousf/408x134.png"> <span style="float:left; margin:0 auto; max-width:100%"> 
     <p style="text-align:center; text-decoration: underline"><strong> Works 
      with these Things:</strong></p> 
     <div style="float:left;max-width:100%; width:160px;text-align:center;margin-right:20px;margin-bottom:20px"> 
     <div style="background-color: rgb(255, 0, 255);"><span style="text-decoration: underline;"><strong>Flowers 
       A<br> 
      </strong></span></div> 
     <div style="background-color: rgb(0, 255, 255);"><img src="http://s25.postimg.org/i8gxl0uzf/140x124.png"></div> 
     </div> 
     <div style="float:left;max-width:100%; width:230px;text-align:center;"> 
     <div style="background-color: rgb(255, 0, 255);"><span style="text-decoration: underline;"><strong>Flowers 
       B<br> 
      </strong></span></div> 
     <div style="background-color: rgb(255, 255, 0);"><img src="http://s25.postimg.org/a48tga8kf/209x112.png"></div> 
     </div> 
    </span> 

现在的解释：
所以，我第一次对自己一行的第一个图像开始时便有了底下面有两对div。我想我浪费了太多的水平空间，所以我通过在该图像中放置float：left并将两对div封闭在“408x134”图像的右边，将两对div放在/右边标记和放置浮动：留在它。

我正在设计这个响应性/移动的想法，并且正试图避免现在使用@media。

因此，当他们在浏览器上水平缩小屏幕尺寸时，右边的两个项目在“408x134”图像下方下降一对，这正是我想要的。随着屏幕变得更小，下面的两个项目分开，“209 x 112”图像在“140 x 124”图像下。 （嗯，它们和每个人之上的div标签）。

这就是我想要的。 然而，我不能得到的最后一部分是我想要这两对div中心。我怎样才能做到这一点？如果你也可以解释你的解决方案，那就太好了，这样我终于可以明白如何解决这个问题，或者避免将它放在第一位。现在我意识到第一对div-Flowers A和“140 x 124”不会完全居中，因为我已经放置了一个右边距，这样当它们相邻时可以有一些空间另一个是水平的，当它们堆放在一个较小的屏幕上时，它们也在彼此之下。为了这一点，我想我将不得不使用@media标签去除/调整边距并添加换行符或其他div或其他东西。

Answer 1

我的袖口：在我有限的经验divs击败css的点。其次，有脚本来检测屏幕大小，并允许你提供单独的CSS基于此。多数民众赞成我是如何玩它的。

Answer 2

尝试下面的代码：

<h4 style="margin-bottom:-15px"><strong>The Item Item Below:</strong></h4> 
    <img style="float:left;width:100%; max-width: 408px; height:100%; max-height: 134px; background-color:red; margin-top:40px; margin-right:20px" 

     src="http://s25.postimg.org/kbrcsousf/408x134.png"> <span style="float:left; margin:0 auto; max-width:100%"> 
     <p style="text-align:center; text-decoration: underline"><strong> Works 
      with these Things:</strong></p> 
      <center> 
     <div style="margin: 0 auto;display:inline-block;max-width:100%; width:160px;text-align:center;margin-right:20px;"> 
     <div style="background-color: rgb(255, 0, 255);"><span style="text-decoration: underline;"><strong>Flowers 
       A<br> 
      </strong></span></div> 
     <div style="background-color: rgb(0, 255, 255);"><img src="http://s25.postimg.org/i8gxl0uzf/140x124.png"></div> 
     </div> 
     <div style="margin: 0 auto; display:inline-block;max-width:100%; width:230px;text-align:center;"> 
     <div style="background-color: rgb(255, 0, 255);"><span style="text-decoration: underline;"><strong>Flowers 
       B<br> 
      </strong></span></div> 
     <div style="background-color: rgb(255, 255, 0);"><img src="http://s25.postimg.org/a48tga8kf/209x112.png"></div> 
     </div> 
    </span> 
    </center> 

Answer 3

我试着看你的HTML，我想你就错过了几个标签。另外，最佳做法是不要将CSS样式与HTML内联;您通常希望将CSS放在单独的样式表中。越过这一切，我认为你需要了解一些关于你正在使用的元素和属性的东西。

A div默认情况下是块级元素，除非您为其添加一些其他覆盖样式，否则它将占用其容器（父级）的100％宽度。一个选项（你选择的）是float:left;，它会让这个元素的行为类似于内联元素（如span或img），除非它总是尝试将自身与容器的左边对齐;无论您设置为容器的对齐方式如何。

我会在你的情况建议是设置图像容器div元素display:inline-block;而不是float:left;，这样它会通过父母的text-align:center;性能受到影响，当没有余地所有div元素是在一个排，他们会掉下来，但在中间对齐。您目前不似乎有一个容器元素，但你的设置应该大概是这个样子：

#container{ 
 
    text-align:center; 
 
} 
 

 
#container .imgwrap{ 
 
    display:inline-block; 
 
}

<div id="container"> 
 
    <div class="imgwrap"><img src="#"/></div> 
 
    <div class="imgwrap"><img src="#"/></div> 
 
    <div class="imgwrap"><img src="#"/></div> 
 
</div>