1

我正在尝试将此输入字段水平和垂直居中于其容器内（绿色框）

有没有办法在没有 CSS3 flexbox 技术的情况下做到这一点？

我尝试过的一切，包括正常的居中技术、边距和自动，以及定位都不起作用。

好吧，定位的问题在于它确实有效，但必须有更好的方法将其向下移动。

有任何想法吗？

这是页面：https ://dl.dropboxusercontent.com/u/270523/help/new.html

我正在尝试使用 id #searchInput 将输入居中

4

3 回答 3

2

添加position: relative到部分容器，然后使用绝对定位以使用输入高度一半的负边距垂直居中对齐输入字段：

#input {
    position: relative;
}

#searchInput {
    position: absolute;
    top: 50%;
    margin-top: -0.809rem;
}
于 2013-04-19T21:48:08.123 回答
0

你可以这样做：

<div style="display:table;">
    <div style="display:table-cell;vertical-align:middle;text-align:center;">centered box</div>
</div>

JSFiddle：http: //jsfiddle.net/V8GUn/

于 2013-04-19T21:50:17.103 回答
-1

尝试将此添加到您的代码中

#searchInput { margin-top: 5px; }
于 2013-04-19T22:01:09.707 回答