Подтвердить что ты не робот

CSS. Слева выровняйте последнюю строку изображений в центрированном div

У меня есть несколько строк изображений, которые я центрирую на странице. Приведенный ниже код делает это, и если пользователь изменяет размер своего браузера, изображения остаются центрированными. Мне нужно, чтобы последняя строка изображений оставалась выровненной. Как я могу это сделать?

<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

4b9b3361

Ответ 1

вы можете попробовать

#12{
  float: left;
}

который сохраняет элементы слева.