垂直對齊使用margin-auto的任何div中的任何內聯元素

我正在設計一個文本字段，我想垂直顯示div的中間。我希望黑色的div可以垂直顯示藍色的中心（id=srch）div。垂直對齊使用margin-auto的任何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>

我的方法：我給黑格頂部和底部邊緣的汽車，但它不工作（也可用於水平中心[左，右margin:auto]它工作中）。 margin:auto只適用於左側和右側？

我想知道這是爲什麼發生，我不希望像任何其他解決方案：

顯示文本內嵌有垂直對齊的div。
顯示適當的填充或邊距。

來源

2012-05-19 Abhishek Gupta

margin: auto不適用於頂部和底部。如果指定了margin-top: auto或margin-bottom: auto，則指定their used value is 0。這是一個article about how you can achieve vertical centering。

來源

2012-05-19 07:49:05 Maehler

你需要在這裏使用一些jQuery來計算父容器的高度。

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

來源

2012-05-19 09:10:28 Dipak

在這種情況下，父容器有一個靜態的高度，這是尋找空邊一個很好的價值的一件容易的事。沒有必要做出比必要更復雜的事情。 – Maehler

您在文章中鏈接的文章是一個靜態解決方案，但使用我提供的小提琴可以將vAlign函數用於任何元素並使其垂直居中。我想這個功能讓它更容易。讓我知道您的評論 – Dipak

是的，但在OP發佈的代碼中也有一個靜態解決方案，不需要動態計算高度。我完全可以看到像這樣的東西的動態解決方案的需求，但不是在這種特殊情況下。順便說一句，我喜歡你的解決方案！ – Maehler

垂直對齊使用margin-auto的任何div中的任何內聯元素

回答

相關問題