css - 当两个 div 相互移动/堆叠时如何使它们居中？

Question

请注意，是的，这里也有类似的问题，但我尝试了他们提到的解决方案，但我仍然无法让我的元素居中。我卡住了 text-align: center, display:inline-block; margin: 0 auto 和 width: 100% 在多个地方，我仍然无法让元素显示居中。

好的。顺便说一句，这是代码，然后是下面的解释:

<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。我认为我浪费了太多的水平空间，所以我将两对 div 放置在“408x134”图像的旁边/右侧，方法是在该图像中放置 float:left 并用 span 包围两对 div标记并将 float:left 放入其中。

我在设计这个时考虑到了响应能力/移动性，并且我现在尽量避免使用@media。

因此，当一个人在浏览器上水平缩小屏幕大小时，右侧的两个元素会成对下降到“408x134”图像下方，这正是我想要的。随着屏幕变得更小，下面的两个元素分开，“209 x 112”图像位于“140 x 124”图像下方。 (好吧，那个和每个标签上方的 div 标签)。

这就是我想要的。 但是，我无法得到的最后一部分是我希望这两对 div 居中。我怎样才能做到这一点？如果您也可以对您的解决方案进行解释，那就太好了，这样我就可以最终了解将来如何解决这个问题或首先避免它。现在我意识到第一对divs -- 花 A 和“140 x 124”不会完全居中，因为我放置了右边距，这样当它们水平相邻时可以留出一些空间，并且当它们彼此相邻时也可以留出一些空间堆叠在较小的屏幕上。为了使它居中，我想我将不得不使用@media 标签来删除/调整边距并添加换行符或另一个 div 或其他东西。

Answer 1

试试下面的代码:

 <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>