html - CSS 在 div 中居中文本框

Question

我希望顶部和底部的边距相同。

我的容器 div 看起来像:

<div id="search">
    <input id="txtSearch" type="txt">
</div>

我的 CSS 看起来像:

#search{
    min-width: 25%;
}
#txtSearch{
    display: block;
    width: 80%;
    height: 60%;
    margin: 0 auto;
    }

有关更多信息，请查看我的 JSFIDDLE

Answer 1

您的 #txtSearch 选择器没有在您提供的 JSFiddle 演示中指定 margin: 0 auto。添加这个可以集中 input 元素:

#txtSearch {
    ...
    margin: 0 auto;
}

JSFiddle demo .

---

更新(来自评论)

But now the input is still on top, but there should be the same space at top and bottom.

为此，我会在 header 元素上使用 table 显示，并在其子元素上使用 table-cell 显示，设置为“中间”的 vertical-align:

#header {
    display: table;
}
#header a, #header a:link, #header a:visited, #header a:active, #header div {
    display: table-cell;
    vertical-align: middle;
}

JSFiddle demo .