text - 输入文本字段填充

Question

我有这个简单的代码 - 一个文本字段和一个图像（图像高度为 30 像素）

代码是：

<input type="text" style="height:30px;" />
<input type="image" src="images/download_button.png" />

结果是两个高度为 30px 的元素未对齐。文本字段相对于图像向下 - 比如填充？？？你知道，为什么元素不对齐？？？

截屏：

Answer 1

           Assuming your form id is "myform"

            #myform input{

            vertical-align:middle;

        }

       will do the trick.
if you are not using form:Try

<input type="text" style="height:30px;vertical-align:middle;" />
<input type="image" style="height:30px;vertical-align:middle;" src="images/download_button.png" />

Answer 2

使用 CSS "top" 属性来增加按钮与顶部的距离：

<style> 
  [selector for image] {top: 20px;}
</style>`

Answer 3

Try removing padding and margin:

<input type="text" style="margin:0px;padding:0px;height:30px;" />
<input type="image" style="margin:0px;padding:0px;" src="images/download_button.png" />

Remember that the text input box is likely to add 2 pixels either side of the block for its border. You could remove the border all together with border:0;.

Also, double check any contradicting CSS rules elsewhere in your markup.

EDIT:

It's to do with the behaviour of the inputs in regards to floating. Add float:left; to both style to see what I mean. They don't know how to behave next to each other until you specify that you want them to appear on the same line.