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

更新（来自评论）

但是现在输入仍然在顶部，但顶部和底部应该有相同的空间。

为此，我在table元素上使用header显示，并在其子代上显示table-cell，并使用vertical-align设置＆＃ 34;中间＆＃34;：

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

JSFiddle demo

CSS将文本框放在div中

1 个答案: