Html 为什么没有文本的按钮具有不同的垂直对齐方式？

我有下面的表单要自定义

<form>
    <input type="text" value="" />
    <button></button>
</form>

一些文本

如果您将

垂直对齐

指示器添加到按钮上，它将帮助按钮移动到您想要的位置，但它需要一点额外的边距来将其向上推一点

试试这个：

输入{
宽度：200px；
高度：20px；
边框：1px实心#0066cc；
边界半径：20px；
填充：0；
}
钮扣{
左边距：-31px；
背景色：白色；
背景图像：url（“http://s18.postimg.org/k6rruvokl/loupe_recherche.gif");
背景重复：无重复；
背景位置：中心；
边界：无；
宽度：19px；
高度：19px；
填充：0；
垂直对齐：底部对齐；
边缘底部：1px；
}

---

这似乎是一个垂直对齐的问题，因为元素是内联的-（块？）

*{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
保证金：0；
填充：0；
}
输入{
宽度：200px；
高度：20px；
边框：1px实心#0066cc；
边界半径：20px；
垂直对齐：顶部；
}
钮扣{
背景色：白色；
背景图像：url（“http://s18.postimg.org/k6rruvokl/loupe_recherche.gif");
背景重复：无重复；
背景位置：中心；
边界：无；
宽度：20px；
高度：20px；
边框：1px纯红；
垂直对齐：顶部；
}

---

，因为它们具有默认的

垂直对齐

属性

基线

，该属性根据元素内容（文本）的底部对齐内联元素

如果没有内容，则垂直对齐不能基于该内容，而是基于元素的底部

您可以使用不打断的空格或通过更改垂直对齐来修复此问题

<form>
    <input type="text" value="" />
    <button>&nbsp;</button>
</form>

一本好书：

---

要添加到按钮的图像大小是多少？如果图像大于按钮的分配大小，我会认为这可能会导致一些对齐问题…谢谢，这是迄今为止最完整的答案。

button {
    margin-left: -30px;
    background-color: white;
    background-image: url("http://s18.postimg.org/k6rruvokl/loupe_recherche.gif");
    background-repeat: no-repeat;
    background-position: center center;
    border: none;
    width: 19px;
    height: 19px;
    padding: 0;
    vertical-align:middle;
}