html - 在 div 中垂直居中显示元素

Question

我有这个非常简单的 HTML 和 CSS ( jsFiddle )，我只希望输入和链接在 div 的中间垂直对齐，如下所示：

---

                             -----------     -----------     -----------
      ------------------     |         |     |         |     |         |
      |                |     |         |     |         |     |         |
      ------------------     |         |     |         |     |         |
                             -----------     -----------     -----------

---

我知道我可以使用display: tableand vertical-align: middle，但这对我不起作用，正如我在下面的评论中解释的那样......我可以使用其他方法吗？

<div>
    <input type="text"/>
    <a></a>    
    <a></a>
    <a></a>
</div>

-------------------------------

div {
    width: 100%;
    height: 100px;
    background-color: red;
}

input {
    display: inline-block;
}

a {
    display: inline-block;
    width: 80px;
    height: 80px;
    background-color: white;
}

Answer 1

由于所有元素都是inlineand inline-block，因此您可以像这样简单地使用line-heightand vertical-align：

CSS：

div {
    width: 100%;
    height: 100px;
    background-color: red;

    /* Match the DIV height and get rid of the font size which throws off alignment */
    line-height: 100px;
    font-size: 0;
}

input {
    display: inline-block;

    /* Vertically align the input and restore its font size */
    vertical-align: middle;
    font-size: 16px;
}

a {
    display: inline-block;
    width: 80px;
    height: 80px;
    background-color: white;

    /* Match the element height to center the text */
    line-height: 80px;

    /* Vertically align the anchor and restore its font size */
    vertical-align: middle;
    font-size: 16px;
}

JSFiddle在这里

在 IE7、IE10、Chrome、Firefox 中测试。

Answer 2

我想你需要更多的元素。我喜欢使用 CSS 位置和边距的组合来居中我的元素。

我将所有元素包装在 div.container 中：

.container{
    position: relative;
    height: 100%;
}

并且每个都在一个 div.item 中：

.item {
    width: 100px;
    height: 100%;
    float: left;
    position: relative;
}

然后在这些元素上添加一个类（输入和a）

.vertical-align {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

可以在http://jsfiddle.net/VEQe2/中看到一个示例