在导航中居中文本（水平和垂直）

Centering text (horizontally and vertically) in nav

我对 HTML/CSS 非常陌生，所以这可能是一个愚蠢的问题，但我很难将我的文本置于导航栏的中心。我不知道如何正确地将它水平或垂直居中，所以为了水平放置它，我只是在导航中最左边的元素上放置了 25% 的左边距。我假设这不是做事的正确方法。至于如何让文字垂直居中，我完全不知道该怎么做。

作为一个附加问题，谁能告诉我如何在调整浏览器大小时缩放文本 window？当我缩小 window 的宽度时，我所有的文字都会在屏幕上扭曲。

P.S。我正在做这个作为 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;
}

编辑：这是一张 link 当前外观的图像。我忘了添加这个。 http://puu.sh/ld0LM/2de7d95deb.jpg

编辑 2：我的导师告诉我尽可能使用 % 而不是 px，以便它在浏览器 window 更改时缩放，但是对几乎所有内容使用 % 是否合理？我假设如果我将导航高度更改为 50 或 100 像素左右，然后使我的行高相同，它会解决我的问题，但我不能用 %.

通过添加 line-height: 40px 来更改您的 nav a CSS。

nav a {
    display: inline-block;
    text-decoration: none;
    color: white;
    float: left;
    width: 15%;
    height: 100%;
    margin-right: 1%;
    line-height: 40px;
}

或者如果您不喜欢这种方法，您可以将其添加到 nav a:

position: relative;
top: 50%;
transform: translateY(-50%);

CODEPEN DEMO

试试这个https://jsfiddle.net/7qovrydb/

CSS 

#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%;
    text-align: center;
    background-size: cover;
    background-position: bottom left;
    background-repeat: no-repeat;
    background-color: #22756B;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 2em;
}

nav a {
    display: inline-block;
    text-decoration: none;
    color: white;
    height: 100%;
    font-size: 20px;
    padding: 10px;
}


#topNav a:hover {
    border-radius: 8px;
    background-color: white;
    color: black;
}

我愿意帮忙。您可以简单地添加 text-align: center;给你导航 css.

nav a {
    display: inline-block;
    text-decoration: none;
 text-align: center;
    color: white;
    float: left;
    width: 15%;
    height: 100%;
    margin-right: 1%;
}

水平对齐：将 text-align:center 添加到 nav a。
垂直对齐：尝试将 nav 设置为固定高度：例如 80px，然后将 line-height 设置为与 nav a.

相同的 80px 
#topNav {
    border: 2px solid black;
    border-radius: 8px;
    margin-left: auto;
    margin-right: auto;
    width: 66%;
    height: 80px;
   /* 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;*/
    padding:0px 1px 0px 1px;
    border-radius: 8px;
    text-align:center;
    text-decoration: none;
    color: white;
    float: left;
    width: 33%;
    height: 100%;
    line-height:80px;
}

#left {
   /* margin-left: 25%;*/
}

#topNav a:hover {
    border-radius: 8px;
    background-color: white;
    color: black;
}

如果您想将文本居中对齐，请使用 text-align: center;。要确保文本顶部和底部之间的 space 等量，请使用边距。例如：margin: 10px 0px 10px 0px;。我使用 px(pixel) 进行小的调整，使用 %(percentage) 进行大的调整。例如：要使容器的长度占页面的一半，我会使用 width: 50%; 而不是 width: 500px;