2

当我遇到问题时，我正在使用 CSS 制作网页。我的菜单栏没有在栏中垂直居中链接。这应该很简单，但我需要帮助。抱歉拖了这么久，我只是不想留下任何东西。

HTML：

<html>
<head>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<title>noobyDev</title>
<style>
body {
    background-color: CCFFFF; 
    text-align: center; 
}
div.background
{
    width: 90%;
    height: 200px;
    background color: #00FF66;
    border: 2px solid black;
    margin: 0 auto;
    text-align: left;  
}
div.background h3
{
    margin: 0px 40px;
}
div.logo
{
    width: 350px;
    height: 75px;
    background: url(logo.png);
    margin: 30px 40px;
}
div.nav
{
    background-color: #00CC66;
    border: 2px solid black;
    width: 90%;
    margin: 0 auto;
    text-align: left; 
    height: 30px;
    border-top: 0px solid black;
}
.menu
{
    margin: 5px 10px;
    background: #00CC66;
    color: black;
    -webkit-transition: color;
}
.menu:hover
{
    color: red;
}
div.center
{
    width: 90%;
    height: 700px;
    background color: white;
    border: 2px solid black;
    border-top: 0px solid black;
    margin: 0 auto;
    text-align: left;   
}
div.column1 h1
{
    margin: 30px 40px;
}
div.column1 p
{
    margin: 30px 40px;
}
div.column1
{
    width: 70%;
    height: 100%;
    float: left;
    display: block;
    border-right: 2px solid black;
}
div.column2
{
    width: 30%
    height: 100%;
    float: left;
    display: block;
    text-align: left;
}
div.column2 a
{
    margin: 30px 40px;
    display: block;
    text-decoration: none;
    font-size: 30px;
    font-color: black;
}
div.legal
{
    width:90%;
    height: 50px;
    background color: white;
    border: 2px solid black;
    border-top: 0px solid black;
    margin: 0 auto;
    text-align: center;
}
</style>
</head>
<body>
<div class="background">
<div class="logo">
</div>
<h3>Have you failed today?</h3>
</div>
<div class="nav">
<a style=text-decoration="none" href="index.html" class="menu">Home</a>
<a style=text-decoration="none" href="html.html" class="menu">HTML</a>
<a style=text-decoration="none" href="javascript.html" class="menu">Javascript</a>
<a style=text-decoration="none" href="css.html" class="menu">CSS</a>
<a style=text-decoration="none" href="java.html" class="menu">Java</a>
<a style=text-decoration="none" href="news.html" class="menu">News</a>
<a style=text-decoration="none" href="games.html" class="menu">Games</a>
<a style=text-decoration="none" href="other.html" class="menu">Other</a> 
</font>
</div>
<div class="center">
<div class="column1">
<h1>Home</h1>
<br>
<p>Welcome to noobyDev.com! This is my site where I document all of my fails and successes worth sharing. Feel free to use them unless otherwise instructed to do so. Check back often and admire my awesomeness!</p>
</div>
<div class="column2">
<a href="news.html#viral_video">Video?</a>
</div>
</div>
<div class="legal">
<p>This site is heavily protected with a gargantuan army of mutant cotton balls; I would recommend not stirring trouble up. Just so you know, this site looks the best in Internet Explorer.</p>
</div>
</body>
</html>
4

2 回答 2

0

只需添加line-height一个div.nav：

div.nav
{
    background-color: #00CC66;
    border: 2px solid black;
    width: 90%;
    margin: 0 auto;
    text-align: left; 
    height: 30px;
    line-height: 30px;
}

这是要测试的 JS Bin：http: //jsbin.com/oliwit/1/

于 2013-05-21T23:02:30.243 回答
-1

关于如何在 CSS 中使用垂直对齐通常有很多误解，我发现这篇文章对如何全面理解它很有帮助... http://phrogz.net/css/vertical-align/

于 2013-05-21T23:01:36.883 回答