1

ブラウザの上部に div を固定しています。div の幅は 100%、高さは 90px です。内側には、左側に配置する必要があるテキストのスパンと、右側に配置する必要がある水平リストがあります。現在、スパンを左に、リストを右にフローティングしています。スパンとリストを div 内で垂直方向に中央揃えするにはどうすればよいですか?

http://jsfiddle.net/4keeS/6/

4

4 に答える 4

0

残念ながら、垂直方向の配置はテーブルセル（つまりTD、TH要素）にのみ適用できます。
したがって、TABLEコンテンツを垂直方向に揃えるためにを使用する必要があります。

<html>
<head>
  <style>
    .text         { float: left; }
    .list         { list-style: none; float: right; margin: 0; }
    .list li      { float: left; }
    #vdivwrap     { width: 100%; }
    #vdivcontent  { height:90px; vertical-align: center; background:#8c8; }
  </style>
</head>
<body>
  <table id="vdivwrap" border="0" cellspacing="0" cellpadding="0">
    <td id="vdivcontent">
      <span class="text">[text span]</span>
      <ul class="list">
        <li>[list item 1]</li>
        <li>[list item 2]</li>
      </ul>
    </td>
  </table>
</body>
</html>
于 2012-08-04T10:20:25.880 に答える
0

タイトル スパンと UL コンテンツの高さがわかっている場合は、

position:absolute /* or relative */;
top:50%;
margin-top: -X /* where X is half the height of your content. That's a negative margin pulling the content up so it's center aligns with the center of the parent div */;

ここを参照してください: http://jsfiddle.net/XAgyv/1/

コンテンツの高さを垂直方向の中央に配置することを知らずにこれを行う良い方法は見つかりませんでした.他の回答を楽しみにしています.

于 2012-08-04T10:39:19.380 に答える
0

これが1つの解決策です...

http://jsfiddle.net/4keeS/7/

...これをspanとliで使用する

display:inline-block;
line-height:70px;
height: 70px;
于 2012-08-04T06:49:03.260 に答える