使用边距自动垂直对齐任何 div 中的任何内联元素

我正在设计一个文本字段，我希望它垂直显示在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顶部和底部边距自动，但它不起作用(对于水平中心[左右margin:auto]它也在工作(。margin:auto只适用于左右吗？

我想知道为什么会发生这种情况，我不想要任何其他解决方案，例如：

使用垂直对齐的div 内联显示文本。
使用适当的填充或边距显示。

margin: auto不适用于

顶部和底部。如果指定了margin-top: auto或margin-bottom: auto，则其使用值为 0。这是一篇关于如何实现垂直居中的文章。

这里需要使用一些jQuery来计算父容器的高度。

演示 - http://jsfiddle.net/tQBVy/

相关内容

最新更新

热门标签：