Question

我有以下要自定义的表单。

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

我希望按钮有背景图像而没有文字。

问题是当我没有在其中写入任何文本时，按钮会失去垂直对齐。

有人可以解释这种行为吗？

input {
    width: 200px;
    height: 20px;
    border: 1px solid #0066cc;
    border-radius: 20px;
    padding: 0;
}

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;
}

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

Answer 1

如果你将vertical-align指示符添加到按钮，它应该有助于它移动到你想要的位置，它需要一点额外的余量才能将它推高一点。

试试这个：

＆＃13;

input {
  width: 200px;
  height: 20px;
  border: 1px solid #0066cc;
  border-radius: 20px;
  padding: 0;
}
button {
  margin-left: -31px;
  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: bottom;
  margin-bottom: 1px;
}

＆＃13;

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

＆＃13;

Answer 2

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

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
input {
  width: 200px;
  height: 20px;
  border: 1px solid #0066cc;
  border-radius: 20px;
  vertical-align: top;
}
button {
  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: 20px;
  height: 20px;
  border: 1px solid red;
  vertical-align: top;
}

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

Answer 3

因为它们具有vertical-align的默认属性baseline，它根据元素内容（文本）的底部对内联元素进行对齐。

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

您可以使用不间断的空格或更改垂直对齐来解决此问题。

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

JSFiddle

- 或 -

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;
}

JSFiddle

好读：

All you need to know about vertical-align - Christopher Aue

为什么没有文字的按钮有不同的垂直对齐？

3 个答案: