將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 /答案 ，謝謝大家嘗試解決我的問題。 我使用JS解決了這個問題，其中一個函數可以監聽屏幕調整大小事件。 這些函數會檢查右邊距的大小，並在左側添加填充，以便所有內容都居中。 我沒有找到使用CSS的解決方案。 如果你有一個，我非常想知道它。

謝謝eveyone！

Answer 1

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

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

Answer 2

使用display:inline-block占用額外的余量。 要刪除那些設置font-size:0px到#out容器。 看演示

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％，所以左邊距：auto，margin-right：auto一起使“內部”div中心位於“外部”內。

將float屬性設置為left會移動內部的所有imgs，以便始終嘗試向左移動。

編輯：我看了你提供的照片后修好了。

我沒有對此進行過測試，但我相信它應該可行，如果您遇到更多問題，請告訴我。

Answer 4

這是你想要實現的目標？ 演示

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

要使框不能超出頁面的整個寬度，請嘗試在#out上設置小於100％的寬度並添加margin:auto; 以中心為中心。

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

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