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; }

我试过使用heightandline-height然后vertical:align middle但它似乎没有用，我是 html + CSS 的新手并且遇到了一些麻烦。

4

3 回答 3

3

应用于margin:0;你的 ul 元素；

这是一个小提琴。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

Line-height 也应该起作用，将其设置为与父 div 相同的高度：

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

编辑： Line-height 通常在浮动元素中不起作用，因此它可能对您不起作用。

于 2013-08-30T23:04:10.407 回答
0

这种样式定义使您的线条变得比需要的更大。

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

您应该为此元素定义一个较小的高度。

于 2013-08-30T23:05:19.420 回答