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

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

作为一个补充问题，谁能告诉我在调整浏览器窗口大小时如何进行文本缩放？当我缩小窗口的宽度时，我所有的文本都会在屏幕上蜷缩起来

顺便说一句，我做这件事是作为我所在班级的作业，但我的老师并没有真正帮助我

HTML:

编辑：这里有一个链接，指向它当前外观的图像。我忘了把这个加进去。

---

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

通过添加

线高度：40px

来更改您的

导航a

CSS

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

或者，如果您不喜欢该方法，可以将其添加到

导航a

：

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

试试这个

CSS

---

我想帮忙。您可以简单地添加文本对齐：居中；给你导航一个css

nava{
显示：内联块；
文字装饰：无；
文本对齐：居中；
颜色：白色；
浮动：左；
宽度：15%；
身高：100%；
保证金权利：1%；
}

水平对齐：将

文本对齐：居中

添加到

导航a

垂直对齐：尝试将

导航设置为固定高度：例如80px，然后将
行高度设置为与
导航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;
}

如果要在中间对齐文本，请使用<代码>文本对齐：中心；<代码>。要确保文本顶部和底部之间的空间相等，请使用边距。例如：
margin:10px 0px 10px 0px。我使用px（像素）进行小调整，使用%（百分比）进行大调整。例如：要使容器的长度占页面的一半，我将使用
width:50%代替
宽度：500px
简单地让别人帮你做作业是很难达到做作业的目的的。根据作业的范围，这可能已经被视为作弊，这意味着当助教发现时，你可能会不及格。相信我，我们助教很清楚stackoverflow；-）@克里斯汀·弗里茨，不，我不是想作弊或做类似的事。我在谷歌上搜索了好几个小时，找不到任何帮助我的东西。我只想把文字居中。任务不是简单地将文本居中，而是创建一个完整的网站，但我只是想让我的导航栏看起来漂亮。这可能不是你想听到的，但我认为对你（和任何人）来说，最简单的方法是使用表/表单元格属性来创建一个正确的导航栏。当然，这只是一个建议，你可以用其他方法来实现，但这基本上可以用更少的代码来满足你的所有要求。这似乎有点帮助（降低了一点文本），但看起来文本下面的空间比上面的多。你可以根据自己的喜好调整这个数字，也使用另一种方法进行了更新。
position: relative;
top: 50%;
transform: translateY(-50%);

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

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