如何将表单放在 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

使用这个：

演示

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

像这样的东西

.CSS：

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

Answer 3

display:table也是一个解决方案

演示 ： http://jsfiddle.net/sS8HB/3/ 顶部对齐

演示2：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>