img и form в линию

[Fastfold]

Добрый день, допустим нужно, разместить лого по центру, а выбор языка с краю.

 

Если расматривать этот кусок кода, почему элемент form ведет себя так, будто img растянут на всю страницу ?

 

http://jsfiddle.net/dmhrvs9L

 

HTML

<div class="top">    <img class="logo" src="http://aux.iconpedia.net/uploads/dog-paw-icon-256.png" width="100" height="" alt="logo">    <form name="language" class="lang" action="#" method="get">        <select>            <option>EN</option>        </select>    </form></div>

CSS

.top {	height: 200px;    background-color: #dadada;}.logo {	margin: 0 auto;	display: block;	padding: 15px 0 0 0;}.lang {	float: right;	display: block;}

Если делать элементам img и form как display: inline-block, то margin: 0 auto; не работает.

 

Почему при inline: block не работает margin auto ?

[Great Rash]

Почему при inline: block не работает margin auto ?

 

Вот тут написано почему.

 

Чтобы выровнять инлайн-блоки по центру нужно задать родителю text-align: center;

[psywalker]

Fastfold, ещё бы я на вашем месте прочитал внимательно вот эту книжечку, так как раз по теме много чего есть.

[Fastfold]

Спасибо, почитаю.