將div中的父div對齊，子div與左對齊

Question

我試圖在div（ #useruploads ）中獲得一個父div（ #account_thumbs ）（是的，它在技術上是一個子div）以在該div中居中，而所述父div的子div（ .imagethumb ）將去左對齊。

但我現在的問題是，由於父div的動態寬度，整個事物要么是居中的，要么是左對齊的。 這似乎是由於瀏覽器生成的新行，當他無法在同一行上放置更多div時（達到max-width: 75% ）。 每個子div的width為156px ， margin為2px 。

當#useruploads現在的width為505px ，瀏覽器只能將三個.imagethumb放在同一行，然后創建一個新行 - 但不是得到#account_thumbs width為~470px ，瀏覽器只占用整個空間（這就是為什么我有這個問題）。 下面的小提琴顯示了我的困境。

我現在的問題是，我怎樣才能防止或繞過它，從而出現eat the whole available space “功能”，這樣我就可以將#account_thumbs放在#useruploads中心，而.imagethumb框左對齊？

 #useruploads { display: inline-flex; flex-wrap: wrap; max-width: 75%; min-width: 300px; margin-top: 0px; margin-left: auto; margin-right: auto; padding: 5px; } #account_thumbs { display: inline-flex; flex-wrap: wrap; width: 100%; margin: 0 auto; overflow: hidden; } #account_thumbs_clearfix { clear: both; } #user_albums { overflow: hidden; } .pageindicator { } #pageindicator_top { display: inline-block; margin-left: auto; margin-right: 0px; margin-bottom: 10px; } #pageindicator_top a, #pageindicator_bottom a { color: #2779AA !important; } #pageindicator_top .ui-state-active, #pageindicator_bottom .ui-state-active { color: #FFF !important; } #pageindicator_bottom { display: inline-block; margin-top: 10px; margin-left: auto; margin-right: 0px; } .imagethumb { position: relative; display: inline-block; padding: 3px; margin: 2px; line-height: 0; width: 150px; height: 150px; background: #333 none repeat scroll 0% 0%; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; } .imagethumb_element { } .imagethumb_element img { max-height: 150px; max-width: 150px; } .hover-icons { display: none; position: absolute; bottom: 0; right: 0; height: 20px; width: 44px; background: rgba(51, 51, 51, 0.8) none repeat scroll 0% 0%; } .hover-icons-small { display: none; position: absolute; bottom: 0; right: 0; height: 20px; width: 20px; background: rgba(51, 51, 51, 0.8) none repeat scroll 0% 0%; } .hover-icons-subelements { position: relative; margin-top: 2px; } 

 <link href="https://www.anitube-nocookie.ch/res/global.css" rel="stylesheet"/> <div id="useruploads"> <div id="pageindicator_top" class="pageindicator"> &nbsp;&nbsp;<a id="imagehost_pagebutton_1" class="buttons_medium ui-state-active" >1</a>&nbsp;&nbsp;<a id="imagehost_pagebutton_2" class="buttons_medium ui-state-active" >2</a>&nbsp;&nbsp;<a id="imagehost_pagebutton_3" class="buttons_medium ui-state-active" >3</a>&nbsp;&nbsp;<a id="imagehost_pagebutton_4" class="buttons_medium ui-state-active" >4</a>&nbsp;&nbsp;<a id="imagehost_pagebutton_5" class="buttons_medium ui-state-active" >5</a>&nbsp;&nbsp;<a id="imagehost_pagebutton_6" class="buttons_medium ui-state-active" >6</a>&nbsp;&nbsp;<a id="imagehost_pagebutton_7" class="buttons_medium ui-state-active" >7</a> </div> <div id="account_thumbs_clearfix"> </div> <div id="account_thumbs"> <div id="hGhh9Oi" class="imagethumb ui-draggable ui-draggable-handle" data-pid="hGhh9Oi"> <a class="imagethumb_element" ><img src="https://www.anitube-nocookie.ch/res/imagehost_add_album.png" /></a> <div id="hover-icons-hGhh9Oi" class="hover-icons ui-draggable ui-draggable-handle" style="display: none;"> <a class="cursor-pointer " ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/link_break.png"></a> <a class="cursor-pointer" ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/cross.png"></a> </div> </div><div id="3rV4fWv" class="imagethumb ui-draggable ui-draggable-handle" data-pid="3rV4fWv"> <a class="imagethumb_element" ><img src="https://www.anitube-nocookie.ch/res/imagehost_add_album.png" /></a> <div id="hover-icons-3rV4fWv" class="hover-icons ui-draggable ui-draggable-handle"> <a class="cursor-pointer " ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/link_break.png"></a> <a class="cursor-pointer" ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/cross.png"></a> </div> </div><div id="CRoBsHA" class="imagethumb ui-draggable ui-draggable-handle" data-pid="CRoBsHA"> <a class="imagethumb_element" ><img src="https://www.anitube-nocookie.ch/res/imagehost_add_album.png" /></a> <div id="hover-icons-CRoBsHA" class="hover-icons ui-draggable ui-draggable-handle" style="display: none;"> <a class="cursor-pointer " ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/link_break.png"></a> <a class="cursor-pointer" ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/cross.png"></a> </div> </div><div id="ofU2T57" class="imagethumb ui-draggable ui-draggable-handle" data-pid="ofU2T57"> <a class="imagethumb_element" ><img src="https://www.anitube-nocookie.ch/res/imagehost_add_album.png" /></a> <div id="hover-icons-ofU2T57" class="hover-icons ui-draggable ui-draggable-handle" style="display: none;"> <a class="cursor-pointer " ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/link_break.png"></a> <a class="cursor-pointer" ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/cross.png"></a> </div> </div><div id="iLsZ3ON" class="imagethumb ui-draggable ui-draggable-handle" data-pid="iLsZ3ON"> <a class="imagethumb_element" ><img src="https://www.anitube-nocookie.ch/res/imagehost_add_album.png" /></a> <div id="hover-icons-iLsZ3ON" class="hover-icons ui-draggable ui-draggable-handle" style="display: none;"> <a class="cursor-pointer " ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/link_break.png"></a> <a class="cursor-pointer" ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/cross.png"></a> </div> </div><div id="EHM7Gw5" class="imagethumb ui-draggable ui-draggable-handle" data-pid="EHM7Gw5"> <a class="imagethumb_element" ><img src="https://www.anitube-nocookie.ch/res/imagehost_add_album.png" /></a> <div id="hover-icons-EHM7Gw5" class="hover-icons ui-draggable ui-draggable-handle" style="display: none;"> <a class="cursor-pointer " ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/link_break.png"></a> <a class="cursor-pointer" ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/cross.png"></a> </div> </div><div id="1SxMR9t" class="imagethumb ui-draggable ui-draggable-handle" data-pid="1SxMR9t"> <a class="imagethumb_element" ><img src="https://www.anitube-nocookie.ch/res/imagehost_add_album.png" /></a> <div id="hover-icons-1SxMR9t" class="hover-icons ui-draggable ui-draggable-handle" style="display: none;"> <a class="cursor-pointer " ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/link_break.png"></a> <a class="cursor-pointer" ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/cross.png"></a> </div> </div><div id="StxvBZi" class="imagethumb ui-draggable ui-draggable-handle" data-pid="StxvBZi"> <a class="imagethumb_element" ><img src="https://www.anitube-nocookie.ch/res/imagehost_add_album.png" /></a> <div id="hover-icons-StxvBZi" class="hover-icons ui-draggable ui-draggable-handle" style="display: none;"> <a class="cursor-pointer " ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/link_break.png"></a> <a class="cursor-pointer" ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/cross.png"></a> </div> </div><div id="5H2ndxU" class="imagethumb ui-draggable ui-draggable-handle" data-pid="5H2ndxU"> <a class="imagethumb_element" ><img src="https://www.anitube-nocookie.ch/res/imagehost_add_album.png" /></a> <div id="hover-icons-5H2ndxU" class="hover-icons ui-draggable ui-draggable-handle" style="display: none;"> <a class="cursor-pointer " ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/link_break.png"></a> <a class="cursor-pointer" ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/cross.png"></a> </div> </div><div id="OkHgAdu" class="imagethumb ui-draggable ui-draggable-handle" data-pid="OkHgAdu"> <a class="imagethumb_element" ><img src="https://www.anitube-nocookie.ch/res/imagehost_add_album.png" /></a> <div id="hover-icons-OkHgAdu" class="hover-icons ui-draggable ui-draggable-handle" style="display: none;"> <a class="cursor-pointer " ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/link_break.png"></a> <a class="cursor-pointer" ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/cross.png"></a> </div> </div><div id="Qbu49rU" class="imagethumb ui-draggable ui-draggable-handle" data-pid="Qbu49rU"> <a class="imagethumb_element" ><img src="https://www.anitube-nocookie.ch/res/imagehost_add_album.png" /></a> <div id="hover-icons-Qbu49rU" class="hover-icons ui-draggable ui-draggable-handle" style="display: none;"> <a class="cursor-pointer " ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/link_break.png"></a> <a class="cursor-pointer" ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/cross.png"></a> </div> </div><div id="O6HwQ5j" class="imagethumb ui-draggable ui-draggable-handle" data-pid="O6HwQ5j"> <a class="imagethumb_element" ><img src="https://www.anitube-nocookie.ch/res/imagehost_add_album.png" /></a> <div id="hover-icons-O6HwQ5j" class="hover-icons ui-draggable ui-draggable-handle" style="display: none;"> <a class="cursor-pointer " ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/link_break.png"></a> <a class="cursor-pointer" ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/cross.png"></a> </div> </div><div id="g1FmyqK" class="imagethumb ui-draggable ui-draggable-handle" data-pid="g1FmyqK"> <a class="imagethumb_element" ><img src="https://www.anitube-nocookie.ch/res/imagehost_add_album.png" /></a> <div id="hover-icons-g1FmyqK" class="hover-icons ui-draggable ui-draggable-handle" style="display: none;"> <a class="cursor-pointer " ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/link_break.png"></a> <a class="cursor-pointer" ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/cross.png"></a> </div> </div><div id="5WxObcv" class="imagethumb ui-draggable ui-draggable-handle" data-pid="5WxObcv"> <a class="imagethumb_element" ><img src="https://www.anitube-nocookie.ch/res/imagehost_add_album.png" /></a> <div id="hover-icons-5WxObcv" class="hover-icons ui-draggable ui-draggable-handle" style="display: none;"> <a class="cursor-pointer " ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/link_break.png"></a> <a class="cursor-pointer" ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/cross.png"></a> </div> </div> <div id="account_thumbs_clearfix"></div> </div> <div id="account_thumbs_clearfix"> </div> <div id="pageindicator_bottom" class="pageindicator"> &nbsp;&nbsp;<a id="imagehost_pagebutton_1" class="buttons_medium ui-state-active" >1</a>&nbsp;&nbsp;<a id="imagehost_pagebutton_2" class="buttons_medium ui-state-active" >2</a>&nbsp;&nbsp;<a id="imagehost_pagebutton_3" class="buttons_medium ui-state-active" >3</a>&nbsp;&nbsp;<a id="imagehost_pagebutton_4" class="buttons_medium ui-state-active" >4</a>&nbsp;&nbsp;<a id="imagehost_pagebutton_5" class="buttons_medium ui-state-active" >5</a>&nbsp;&nbsp;<a id="imagehost_pagebutton_6" class="buttons_medium ui-state-active" >6</a>&nbsp;&nbsp;<a id="imagehost_pagebutton_7" class="buttons_medium ui-state-active" >7</a> </div> <div id="account_thumbs_clearfix"> </div> </div> 

Answer 1

如果我理解正確，那么您要查找的結果是最后一行顯示在布局中心。 發生的事情是縮略圖的包含div已經占據了其父節點提供的整個空間。 它居中，但左邊距現在位於其容器的左邊緣。 該邊距是一條直線，它在容器的整個高度上運行。

結果，您左側對齊的個人拇指乖乖地與其容器的左邊緣對齊，以達到其整個高度。 您可以嘗試為每一行添加一個新的包含div，或者調整拇指本身的對齊方式，而不是父級。