VALIGN文本中的超鏈接列表框導航

http://cssdesk.com/sv2Wq VALIGN文本中的超鏈接列表框導航

我想垂直對齊在各自<li>文本。我建立它的方式似乎不可能做，因爲盒子本身就是鏈接。

這是做一個簡單的導航欄的標準方式，對吧？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
<title> 
</title> 
</head> 
<body> 
<div id="wrapper"> 
<div id="navbar"> 
<ul> 
<li><a href="home.php">Home</a></li> 
<li><a href="news.php">News</a></li> 
<li><a href="roster.php">Roster</a></li> 
<li><a href="forums.php">Forums</a></li> 
<li><a href="contact.php">Contact</a></li> 
</ul> 
</div> 
</div> 
</body> 
</html>

body, div, dl, dt, dd, ul, ol, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input,textarea, p, blockquote, th, td { 
margin: 0; 
padding: 0; 
} 

body { 
background-image:url("images/gradients/background_gradient.png"); 
} 

#wrapper { 
margin: auto; 
min-height: 1152px; 
width: 1536px; 
} 

#navbar { 
border: 1px solid red; 
height: 200px; 
width: 100%; 
font-size: 2em; 
margin: 0; 
} 

#navbar a { 
text-decoration: none; 
} 

#navbar ul { 
display: block; 
list-style-type: none; 
} 

#navbar ul li a { 
float: left; 
display: block; 
height: 200px; 
width: 20%; 
text-align: center; 
letter-spacing: -0.5px; 
} 

#navbar ul li :hover{ 
background-color: white; 
}

來源

2012-08-29 user1361154

這是可能的 - 只需添加line-height

#navbar ul li a { 
    display: block; 
    float: left; 
    height: 200px; 
    letter-spacing: -0.5px; 
    line-height: 200px; /* this */ 
    text-align: center; 
    width: 20%; 
}

來源

2012-08-29 19:12:24

酷感謝，沒有因爲我做，但它的工作原理：P – user1361154

設置錨的行高爲相同的值列表元素的高度。

編輯：太慢了:)

哦，順便說一句：這只是工作，只要你的鏈接都放在一行。

來源

2012-08-29 19:13:04 acki

使用此命令可以垂直放置在html框中。我的作品令人驚歎。確保它在鏈接CSS。

display:table-cell; 
vertical-align:middle;

這裏是它的CSS ...

#navbar ul li a { 
float: left; 
height: 200px; 
width: 20%; 
text-align: center; 
letter-spacing: -0.5px; 
    display:table-cell; 
    vertical-align:middle; 
}

來源

2012-08-29 19:15:01

VALIGN文本中的超鏈接列表框導航

回答

相關問題