在div中垂直居中输入框和按钮

Question

我是一位有用的助手，可以将文本翻译成中文。

我在一个 div 中设置了一个搜索功能，但是由于某种原因无法使其垂直居中。

这是我的代码 -

HTML:

<div class="search">
<input class="searchfield" type="text" placeholder="Search..." value="" />&nbsp;<button class="searchbutton">SEARCH</button>
</div>

CSS：

.search{
padding 0 10px;
font-size:0.8em;
float:right;
height:100%;
display:table;
vertical-align:middle;
}

.searchfield{
display:table-cell;
}

.searchbutton{
display:table-cell;
}

我做错了什么？

- Jizbo Jonez

---

这个看起来在垂直方向上是居中的：http://jsfiddle.net/5cyPs/ - Adam Sweeney

是的，我以为它会居中，但实际上并没有。我使用 Firefox - Firebug 检查了 .search div，发现它有足够的高度让按钮和输入框移动，但仍然没有任何变化... 真是让人烦恼。 - Jizbo Jonez

在我看来很不错，但你可以尝试调整行高，看看是否适合你。 - U.P

谢谢UmairP，line-height对我有用。非常感激。 - Jizbo Jonez

Answer 1

在你的字号上添加一个行高。

.search{
  padding 0 10px;
  font-size:0.8em;
  **line-height: 0.8em;**
  float:right;
  height:100%;
  display:table;
  vertical-align:middle;
}

- Jeff