Как разместить форму рядом с img?

Question

я хочу сделать следующее:

IMG ВВОД ТЕКСТА ВВОД ТЕКСТА ВВЕСТИ

и все это в центре, так что я не могу просто использовать плавающий. Все, что у меня есть:

<img src="lws_img.gif" /> 
<form> 
    <input type="text" placeholder="1" name="1" /> 
    <input type="text" placeholder="2" name="2" /> 
    <input type="submit" /> 
</form> 

Кроме того, все входные тексты + кнопка должна быть такой же высокой, как и изображение.

Answer 1

Что-то вроде this

CSS:

.centerIt { text-align:center; } 
img,form,input { display:inline; } 

Answer 2

использовать это:

demo

HTML

<form> 
    <img src="lws_img.gif" /> 
    <input type="text" placeholder="1" name="1" /> 
    <input type="text" placeholder="2" name="2" /> 
    <input type="submit" /> 
</form> 

CSS

form{ text-align:center } 
form img, form input{ 
    display:inline-block; 
} 

Answer 3

display:table также является решением

демо: http://jsfiddle.net/sS8HB/3/ Топ выравниванием

demo2: http://jsfiddle.net/sS8HB/4/ центр выровнен

CSS

.master{ 
    display:table; 
} 
.img,.frm{ 
    display:table-cell; 
    vertical-align:top; /* for top aligned */ 
    /*vertical-align:middle; /* for middle aligned */ 
} 

HTML

<div class="master"> 
    <div class="img"> 
     <img src="http://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" /> 
    </div> 
    <div class="frm"> 
     <form> 
      <input type="text" placeholder="1" name="1" /> 
      <input type="text" placeholder="2" name="2" /> 
      <input type="submit" /> 
     </form> 
    </div>