在 div 中对齐父 div 居中，子 div 左对齐答案

【问题标题】：Aligning parent div in div centered and the child divs aligned left在 div 中对齐父 div 居中，子 div 左对齐
【发布时间】：2016-11-03 20:31:54
【问题描述】：

我正在尝试在 div (#useruploads) 中获取父 div (#account_thumbs)（是的，从技术上讲，它是一个子 div）以在该 div 中居中，而子 div (.imagethumb) 的说父 div 将左对齐。

但我现在的问题是，由于父 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>

【问题讨论】：

我强烈推荐为此使用 flex-box。定位都可以在 2-3 行 CSS 中完成。在这里开始使用 flex-box CSS 的绝佳指南：css-tricks.com/snippets/css/a-guide-to-flexbox
我之前尝试过inline-flex，但没有任何运气（使用相同的指南）。你认为flex-box 会更好吗？ @Korgrue
inline-flex 是 flex-box 的一部分。放：对齐内容：弹性开始；和 align-items:center 在容器 div 上。删除孩子的所有其他定位。
@Korgrue 我已经这样做了，但是浏览器仍然决定占用所有可用的水平空间，而不是只占用所有子 div 的宽度。因此以整个块左对齐结束。 i.stack.imgur.com/xr2sT.png

标签： html css flexbox

【解决方案1】：

如果我的理解正确，您正在寻找的结果是最后一行显示在布局的中心。发生的事情是您包含缩略图的 div 已经占据了其父级提供的整个空间。它居中，但左边距现在沿着其容器的左边距。该边距是一条贯穿容器全高的直线。

因此，您的左对齐的各个拇指顺从地与其容器的左边缘对齐，以达到其整个高度。您可以尝试为每一行添加一个新的包含 div，或者调整拇指本身而不是父级的对齐方式。

【讨论】：

实际上我希望各个拇指左对齐。这些拇指的父 div 应该在页面内居中（或者准确地说是他的父 div）。