將div對齊到左邊的內容

Question

我想要一個以文檔爲中心的div。 div應該佔用所有可以顯示內容的空間，而內容本身應該與左側對齊。

我想要創建的圖像庫是以行和列爲中心的圖像庫，當您添加新的拇指時，它將與左側對齊。

代碼：

<div id="out"> 
    <div id="inside"> 
     <img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/> 
     <img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/> 
     <img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/> 
     <img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/> 
     <img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/> 
    </div> 
</div> 

和CSS：

img { 
    height: 110px; 
    width: 110px; 
    margin: 5px; 
} 

#out { 
    width: 100%; 
} 

#inside { 
    display: inline-block; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: left; 
    background: #e2e2f2; 
} 

現場版本在這裏：http://jsfiddle.net/anPF2/10/ 正如你會發現，對 「#inside」 右側有，我想空間刪除，所以這個塊將被顯示，直到最後一個正方形和所有它將居中對齊。

編輯： 請查看你的照片：https://www.dropbox.com/s/qy6trnmdks73hy5/css.jpg 它說明了更好的我想要得到的。

編輯2： 我已經下載了另一張照片來顯示它應該如何在低分辨率屏幕上進行調整。請注意左側和右側的邊距。這就是我試圖讓（失敗至今：\） https://www.dropbox.com/s/22zp0otfnp3buke/css2.jpg

編輯3/ANSWER 好，謝謝大家對試圖解決我的問題。我使用JS解決了這個問題，並帶有一個偵聽屏幕大小調整事件的函數。這些函數檢查右邊距的大小並向左側添加填充，以使所有內容居中。我沒有找到使用CSS的解決方案。如果你有一個，我很想知道它。

謝謝eveyone！

Answer 1

指定width爲#inside居中。我用width: 120px。小提琴：http://jsfiddle.net/anPF2/7/

此外，CSS應該用於圖像的高度和寬度，而不是像height="300"這樣的屬性。小提琴反映了這種變化。

Answer 2

使用display:inline-block需要額外的利潤。要將font-size:0px設置爲#out容器。見demo

Answer 3

奠定了你的CSS時，您不應該使用像素，這使得它非常堅硬，並導致人們具有高分辨率屏幕和低分辨率的屏幕可能出現的問題。最好將它聲明爲％或em（當使用寬度時，％仍然可能略好，但對於高度來說em是完美的）

首先，必須聲明「外部」div小於它的值內。例如，如果「外」是體內：

#outer{ 
    width: 100%; 
} 
#inside{ 
    width: 80%; 
    margin-left: auto; 
    margin-right: auto; 
} 
#inside img{ 
    height: 110px; 
    width: 110px; 
    margin-left: 1%; 
    margin-right: 1%; 
    margin-top: 0.5em; 
    float: left; 
} 

好了，所以，由於「內部」是「外」的寬度的80％時，保證金左：汽車，餘量右：汽車一起使「內」div中心內的「外」。

將浮動屬性設置爲左側會移動裏面的所有圖像，以便始終儘可能向左移動。

編輯：我看了你提供的圖片後解決了這個問題。

我還沒有測試過，但我相信它應該可以工作，讓我知道你是否有更多的問題。

Answer 4

這是你想達到的目的嗎？ demo

img { 
height: 110px; 
width: 110px; 
margin: 5px; 
display: inline-block; 
} 

#out { 
width: 100%; 
margin: 0 auto; 
position: relative; 
border: 1px solid red; 
} 

#inside { 
position: relative; 
background: #e2e2f2; 
} 

Answer 5

爲了使箱子不走頁面的整個寬度，嘗試設置寬度小於100％#out並添加margin:auto;使其居中。

#out { 
    width: 90%; 
    margin:auto; 
} 

http://jsfiddle.net/anPF2/36/