CSS - 左对齐居中 div 中的最后一行图像答案

【问题标题】：CSS - Left align the last row of images in a centered divCSS - 左对齐居中 div 中的最后一行图像
【发布时间】：2012-08-25 07:11:23
【问题描述】：

我有多行以页面为中心的图像。下面的代码执行此操作，如果用户调整浏览器大小，图像将保持居中。我需要最后一行图像左对齐。我该怎么做？

<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style> 
#outer
{ 
width: 100%; 
text-align: center; 
}
#inner
{ 
display: inline-block;
}
</style>
</head>
<body>
<br /><br />
<div id="outer">
<div id="inner">
<img id="0" src="http://cdn.sstatic.net/stackexchange/img/slider/judaism.stackexchange.com.png" style="height:100px;width:100px;" /> 
<img id="1" src="http://cdn.sstatic.net/stackexchange/img/slider/judaism.stackexchange.com.png" style="height:100px;width:100px;" /> 
<img id="2" src="http://cdn.sstatic.net/stackexchange/img/slider/judaism.stackexchange.com.png" style="height:100px;width:100px;" /> 
<img id="3" src="http://cdn.sstatic.net/stackexchange/img/slider/judaism.stackexchange.com.png" style="height:100px;width:100px;" /> 
<img id="4" src="http://cdn.sstatic.net/stackexchange/img/slider/judaism.stackexchange.com.png" style="height:100px;width:100px;" /> 
<img id="5" src="http://cdn.sstatic.net/stackexchange/img/slider/judaism.stackexchange.com.png" style="height:100px;width:100px;" /> 
<img id="6" src="http://cdn.sstatic.net/stackexchange/img/slider/judaism.stackexchange.com.png" style="height:100px;width:100px;" /> 
<img id="7" src="http://cdn.sstatic.net/stackexchange/img/slider/judaism.stackexchange.com.png" style="height:100px;width:100px;" /> 
<img id="8" src="http://cdn.sstatic.net/stackexchange/img/slider/judaism.stackexchange.com.png" style="height:100px;width:100px;" /> 
<img id="9" src="http://cdn.sstatic.net/stackexchange/img/slider/judaism.stackexchange.com.png" style="height:100px;width:100px;" /> 
<img id="10" src="http://cdn.sstatic.net/stackexchange/img/slider/judaism.stackexchange.com.png" style="height:100px;width:100px;" /> 
<img id="11" src="http://cdn.sstatic.net/stackexchange/img/slider/judaism.stackexchange.com.png" style="height:100px;width:100px;" /> 
<img id="12" src="http://cdn.sstatic.net/stackexchange/img/slider/judaism.stackexchange.com.png" style="height:100px;width:100px;" /> 
<img id="13" src="http://cdn.sstatic.net/stackexchange/img/slider/judaism.stackexchange.com.png" style="height:100px;width:100px;" /> 
<img id="14" src="http://cdn.sstatic.net/stackexchange/img/slider/judaism.stackexchange.com.png" style="height:100px;width:100px;" /> 
<img id="15" src="http://cdn.sstatic.net/stackexchange/img/slider/judaism.stackexchange.com.png" style="height:100px;width:100px;" /> 
<img id="16" src="http://cdn.sstatic.net/stackexchange/img/slider/judaism.stackexchange.com.png" style="height:100px;width:100px;" /> 
<img id="17" src="http://cdn.sstatic.net/stackexchange/img/slider/judaism.stackexchange.com.png" style="height:100px;width:100px;" /> 
<img id="18" src="http://cdn.sstatic.net/stackexchange/img/slider/judaism.stackexchange.com.png" style="height:100px;width:100px;" /> 
<img id="19" src="http://cdn.sstatic.net/stackexchange/img/slider/judaism.stackexchange.com.png" style="height:100px;width:100px;" /> 
</div>
</div>
</body>
</html>

谢谢，

【问题讨论】：

标签： css html alignment

【解决方案1】：

你可以试试

#12{
  float: left;
}

将项目保持在左侧。

【讨论】：

当我这样做时，只有一个图像向左移动，并且它不会与第一行的图像保持居中。
我希望最后一行的所有图像都左对齐，但图像的左边缘需要与上面的行对齐。
你的意思是你要对齐<div id="inner">里面的所有图片？
查看这些块如何在此页面上居中，最后一行相对于所有块左对齐，这就是我想要做的：stackexchange.com/sites#