如何將兩個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>