<分区>
我对 HTML/CSS 非常陌生，所以这可能是一个愚蠢的问题，但我很难将我的文本置于导航栏的中心。我不知道如何正确地将它水平或垂直居中，所以为了水平放置它，我只是在导航中最左边的元素上放置了 25% 的左边距。我假设这不是做事的正确方法。至于如何使文本垂直居中，我完全不知道该怎么做。
作为一个附加问题，有人能告诉我如何在调整浏览器窗口大小时使文本缩放吗？当我缩小窗口的宽度时，我所有的文本都会在屏幕上扭曲。
附言我将此作为我所在类(class)的作业，但我的导师并没有真正提供帮助。
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Mini Vocaloid Wiki</title>
<meta charset="utf-8" />
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<div id="page">
<nav id="topNav">
<a id="left" href="vocaloids.html">Vocaloids</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</nav>
</div>
</body>
</html>
CSS:
body, html {
height: 100%;
width: 100%;
margin: 0;
}
#page {
height: 100%;
width: 100%;
background-color: yellow;
padding: 1%;
background-image: url('images/background_image.jpg');
background-repeat: no-repeat;
}
#topNav {
border: 2px solid black;
border-radius: 8px;
margin-left: auto;
margin-right: auto;
width: 66%;
height: 5%;
text-align: center;
background-size: cover;
background-position: bottom left;
background-repeat: no-repeat;
background-image: url('images/blurred_background.jpg');
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 2em;
}
nav a {
display: inline-block;
text-decoration: none;
color: white;
float: left;
width: 15%;
height: 100%;
margin-right: 1%;
}
#left {
margin-left: 25%;
}
#topNav a:hover {
border-radius: 8px;
background-color: white;
color: black;
}
编辑:这里有一张图片的链接，展示了它目前的样子。我忘了添加这个。 http://puu.sh/ld0LM/2de7d95deb.jpg
编辑 2:我的导师告诉我尽可能使用 % 而不是 px，以便它在浏览器窗口更改时缩放，但是对几乎所有内容使用 % 是否合理？我假设如果我将导航高度更改为 50 或 100 像素左右，然后使我的行高相同，它会解决我的问题，但我不能用 % 做到这一点。