1
我想知道如何在我的导航栏中垂直居中按钮。现在,他们看起来像this,我希望他们能够居中。这里是我的HTML代码:CSS如何垂直居中导航栏中的按钮垂直对齐居中不工作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Brian Eversole site">
<title>Brian Eversole</title>
<link type="text/css" href="stylesheet3.css" rel="stylesheet">
</head>
<body>
<nav>
<ul>
<li><a href="indextest.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contactus.html">Contact Us</a></li>
</ul>
</nav>
</body>
</html>
这里是我的CSS代码:
/*CSS Reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
nav a {
text-decoration: none;
color: red;
display: inline;
font-size: 2em;
border: black 1px solid;
border-radius: .2em;
padding: .01em;
}
nav li {
display: inline;
padding: .5em;
}
nav ul {
background-color: green;
text-align: center;
vertical-align: center;
position: fixed;
width: 100%;
height: 3em;
}
a:hover {
color: black;
background-color: grey;
border: none;
}
任何帮助到中心的绿色栏中的按钮,将不胜感激。提前致谢!从nav ul
nav ul {
// height: 3em;
}
谢谢,我会在一秒内将您的答案标记为正确,但首先我有几个问题。 –
1)如果我想修改栏的大小并保持居中,该怎么办? –
2)我为什么要做vertical-align:top而不是vertical-align:center? 3)你能解释一下这些做的是什么,以便我理解这是为什么? –