垂直居中CSS/HTML文本

當我遇到問題時，我正在使用CSS製作網頁。我的菜單欄不會將鏈接垂直居中在欄中。它應該很簡單，但我需要幫助。對不起，這麼長時間，我只是不想留下任何東西。垂直居中CSS/HTML文本

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>

來源

2013-05-21 DHUFF

只需添加一個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斌測試：http://jsbin.com/oliwit/1/

來源

2013-05-21 23:02:30

謝謝。這條線完美地解決了我的問題 – DHUFF

-1

通常有關於如何利用很多誤解的CSS中垂直對齊，我發現這個職位上如何得到它的一個充分的瞭解非常有幫助... http://phrogz.net/css/vertical-align/

來源

2013-05-21 23:01:36 user2406160

[Phrogz]（http://stackoverflow.com/users/405017/phrogz）是一個非常有幫助，信息豐富的傢伙;但是，即便如此，請在您的答案中總結外部網站的內容，不要僅僅*鏈接*爲參考。解釋參考文獻，它是如何有用的，總結它，將相關/相關的觀點帶入您的答案。 –

垂直居中CSS/HTML文本

回答

相關問題