Question

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

<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>

谢谢，

~M

Answer 1

你可以尝试

#12{
  float: left;
}

将项目保留在左边。

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

1 个答案: