Question

我有这个非常简单的HTML和CSS（jsFiddle），我只想让输入和链接在div的中间垂直对齐显示，如下所示：

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

我知道我可以使用display: table和vertical-align: middle，但这对我不起作用，因为我在下面的this comment中解释......我还能使用其他方法吗？

<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

由于所有元素都是inline和inline-block，因此您只需使用line-height和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 here

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

Answer 2

我想你需要更多元素。我喜欢使用css positon和margin的组合来集中我的元素。

我将所有元素包装在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/

中看到一个例子

显示以div为中心的元素

2 个答案: