我正在设计一个文本字段，我希望它垂直显示在 div 的中间。我希望黑色 div 显示在蓝色 (id=srch) div 的垂直中心。
HTML 和 CSS:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
* {
vertical-align:baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border:0 none;
outline:0;
padding:0;
margin:0;
}
html {
height:100%;
}
#outerwrapper {
width: 90%;
height: 100%;
min-height: 100%;
height: auto !important;
border: solid thin #333;
}
body {
height: 100%;
width: 100%;
}
#header {
height: 80px;
width: 100%;
background-color:#999;
}
input {
border:solid thin #ab1;
}
#srch{
height:50px;
background-color:#00f;
}
#srch div{
margin: auto 0 auto 0;
width: 200px;
background-color: #000;
}
#contentWrapper {
width: 100%;
overflow: auto;
background-color:#0F0
}
</style>
</head>
<body>
<div id="outerwrapper">
<div id="header">Header
<div id="srch">
<div>
<input type="tel" name="aa"/>
</div>
</div>
</div>
<div id="contentWrapper">
Content Wrapper
</div>
</div>
</body>
</html>
我的方法: 我将黑色 div 的顶部和底部边距设置为自动，但它不起作用(也适用于水平中心 [left and right margin:auto] 它工作中)。 margin:auto 是否只适用于左侧和右侧？
我想知道为什么会这样，我不想要任何其他解决方案，例如:
- 使用垂直对齐的 div 内联显示文本。
- 以适当的填充或边距显示。
最佳答案
margin: auto 不适用于顶部和底部。如果指定了 margin-top: auto 或 margin-bottom: auto，their used value is 0 .这是一个 article about how you can achieve vertical centering .
关于css - 使用 margin-auto 垂直对齐任何 div 中的任何内联元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10663306/