Question

在我的“标题右侧”中垂直对齐我的导航链接时遇到问题我想直接在中心对齐

这是我的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; }

我已尝试使用height和line-height然后使用vertical:align middle，但它似乎不起作用，我是html + CSS的新手并且遇到了一些麻烦。

Answer 1

将margin:0;应用于您的ul元素;

这是一个小提琴。 http://jsfiddle.net/z69c4/我必须删除左侧div并将右侧div向左浮动，以便您可以看到菜单，但这不会影响此问题。

Answer 2

您可以使用vertical-align：middle和display：table-cell。您需要将“display：table”添加到父级才能使其生效。这里也解释了http://phrogz.net/css/vertical-align/index.html

行高也应该有效，将其设置为与父div相同的高度：

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

编辑：行高通常无法在浮动元素中使用，因此它可能不适合您。

Answer 3

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

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

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

垂直对齐文字？

3 个答案: