Question

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

作为一个补充问题，任何人都可以告诉我在调整浏览器窗口大小时如何进行文本缩放？当我使窗口的宽度变小时，我的所有文本都会在屏幕上显示出来。

P.S。我这样做是作为我所在班级的任务，但我的导师并没有真正帮助。

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或100px左右，然后使我的行高相同，那么它将解决我的问题，但我不能用％来做到这一点。

Answer 1

试试这个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;
}

Answer 2

通过向nav a添加line-height: 40px来更改您的nav a { display: inline-block; text-decoration: none; color: white; float: left; width: 15%; height: 100%; margin-right: 1%; line-height: 40px; } CSS。

nav a

或者如果您不喜欢这种方法，可以将其添加到position: relative; top: 50%; transform: translateY(-50%);：

mouseMoveEvent

CODEPEN DEMO

Answer 3

我想帮忙。你可以简单地添加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%;
}

Answer 4

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

#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;
}

Answer 5

如果您想在中间对齐文字，请使用text-align: center;。要确保文本顶部和底部之间的空间相等，请使用边距。例如：margin: 10px 0px 10px 0px;。我使用px（像素）进行小调整，使用％（百分比）进行大调整。例如：要使容器的长度占用页面的一半，我会使用width: 50%;代替width: 500px;

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

5 个答案: