1

「ヘッダー右」のナビゲーション リンクを垂直方向に配置するのに問題があります。中央に直接配置したいのですが。

これが私のhtmlです

<!DOCTYPE html>
<html>
<head>
<title>Website Title</title>
<link href="css/style.css" type="text/html" rel="stylesheet">
</head>

<body>

<div id="wrapper">

<div id="header">

    <div id="header-left">
        <a href="index.php"><img src="images/logo.png" /></a>
    </div>

    <div id="header-right">
        <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="index.php">Home</a></li>
        <li><a href="index.php">Home</a></li>
        <li><a href="index.php">Home</a></li>
        <li><a href="index.php">Home</a></li>
        </ul>
    </div>

</div>


</div>

</body>
</html>

そして、ここに私のcssがあります

body { background-image: url('../images/bg.jpg'); background-repeat:repeat;      padding:10px 0 10px 0; margin:0; }

#wrapper { width:960px; margin:auto;  }

#header { width:960px; background-color: rgba(0,0,0,0.3); height:110px; border-        radius:5px;  }

#header-left { float:left; }

#header-right { float:right; height:110px; line-height:110px;}

#header-right ul li { display:inline-block; padding-right:5px; padding-left:5px; }

#header-right a:link { color:#ffffff; text-decoration:none; }

heightand line-heightand thenを使用してみましvertical:align middleたが、うまくいかなかったようです。html + CSS が初めてで、問題が発生しています。

4

3 に答える 3

3

ul 要素に適用margin:0;します。

これがフィドルです。http://jsfiddle.net/z69c4/左の div を削除し、右の div を左に浮かせてメニューを表示する必要がありましたが、この問題には影響しません。

于 2013-08-30T23:07:16.593 に答える
0

vertical-align:middle と display:table-cell を使用できます。これを機能させるには、「display:table」を親に追加する必要があります。ここでも説明されていますhttp://phrogz.net/css/vertical-align/index.html

行の高さも機能するはずです。親 div と同じ高さに設定します。

  #menu {
  height: 90px;
  line-height: 90px;
}

編集:通常、行の高さはフローティング要素では機能しないため、機能しない可能性があります。

于 2013-08-30T23:04:10.407 に答える
0

このスタイル定義により、ラインが必要以上に大きくなっています。

#header-right { float:right; height:110px; line-height:110px;}

この要素の高さを小さく定義する必要があります。

于 2013-08-30T23:05:19.420 に答える