0

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左と右でのみ機能しますか？

なぜこれが起こっているのか知りたいのですが、次のような他の解決策は必要ありません。

  1. vertical-aligndivを使用してテキストをインラインで表示します。
  2. 適切なパディングまたはマージンで表示します。
4

2 に答える 2

2

margin: auto上下には機能しません。margin-top: autoまたはmargin-bottom: autoが指定されている場合、それらの使用値は0です。これは、垂直方向のセンタリングを実現する方法についての記事です。

于 2012-05-19T07:49:05.023 に答える
1

親コンテナの高さを計算するには、ここでjQueryを使用する必要があります。

デモ-http://jsfiddle.net/tQBVy/

于 2012-05-19T09:10:28.017 に答える