Question

请注意，这里有类似的问题，但我尝试了他们提到的解决方案，我仍然无法让我的项目居中。我卡住了text-align：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。我认为我浪费了太多的水平空间，所以我把两对div放在＆＃34; 408x134＆＃34;右边？图像通过放置float：left在该图像中并用span标记包围两对div并将float：left放在其中。

我正在考虑响应性/移动设计这一点，并且我现在试图避免使用@media。

因此，当一个人在浏览器上横向缩小屏幕大小时，右边的两个项目会在＆＃34; 408x134＆＃34;下面一对下拉。图像，这就是我想要的。随着屏幕变得越来越小，下面的两个项目将被分开，其中＆＃34; 209 x 112＆＃34;图像位于＆＃34; 140 x 124＆＃34;图片。（好吧，那个和每个上面的div标签）。

这就是我想要的。然而，我无法得到的最后一部分是我希望这两对div居中。我怎样才能做到这一点？如果你也可以解释一下你的解决方案，那将是很好的，这样我最终可以理解如何在将来解决这个问题或者首先避免它。现在我意识到第一对divs - 鲜花A和＆＃34; 140 x 124＆＃34;由于我放置了一个右边距，因此不会完全居中，这样当它们彼此相邻时可以有一些空间，当它们堆叠在较小的屏幕上时，它们可以在彼此之下。为了集中我认为我将不得不使用@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>

Answer 2

我试过看你的HTML，我觉得你错过了一些标签。此外，最佳做法是不要将CSS样式与HTML内联;您通常希望在单独的样式表中使用CSS。通过这一切，我认为你需要了解一些与你合作的元素和属性。

默认情况下，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>

Answer 3

我的袖口：在我有限的经验中，divs击败了css。其次，有一个脚本可以检测屏幕大小，并允许你根据它提供单独的css。那是我怎么玩的。

当两个div在彼此移动/堆叠时如何居中？

3 个答案: