如何在HTML中导航菜单中间的标题文本_Html_Css_Center

如何在HTML中导航菜单中间的标题文本

html css

如何在HTML中导航菜单中间的标题文本,html,css,center,Html,Css,Center,我想知道如何在我创建的导航菜单的中心写上标题文本，文本已经居中，但是它位于导航菜单的顶部，而不是中间，这就是我需要的。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Home</title> </head> <style> body {margin:0;} .Header {

我想知道如何在我创建的导航菜单的中心写上标题文本，文本已经居中，但是它位于导航菜单的顶部，而不是中间，这就是我需要的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home</title>
</head>
<style>
    body {margin:0;}
    .Header {
        z-index: 100;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: #000000;
        height: 70px;
    }

    @media screen and (max-width:680px) {
        .Header.responsive {position: relative;}
        .Header.responsive li.icon {
            position: absolute;
            right: 0;
            top: 0;
        }

    }
    @media (max-width: 960px){
    .Header .headerLogo{
        display: inline-block;
        width: 86px;
        height: 15px;
        margin-top: 17px;
        margin-left: 6px;
    }
    }
</style>
</head>
<body>

<div class="Header" id="myHeader">
    <a class = "headerLogo">
    <header><center><i><font size = "6" face = "verdana" color = "white">Lunation Boards</font></i></center></header>
    </a>
</div>
</body>
</html>


家
正文{页边距：0；}
.标题{
z指数：100；
位置：固定；
排名：0；
左：0；
宽度：100%；
背景色：#000000；
高度：70像素；
}
@媒体屏幕和屏幕（最大宽度：680px）{
.Header.responsive{位置：相对；}
.Header.li.icon{
位置：绝对位置；
右：0；
排名：0；
}
}
@介质（最大宽度：960像素）{
.Header.headerLogo{
显示：内联块；
宽度：86px；
高度：15px；
利润上限：17像素；
左边距：6px；
}
}
月牙板

这应该可以做到

要清理HTML，请按如下方式进行设置，并删除标签，如

和

：

以下是对这些变化的全部处理：

试试（这里是您的代码）。将：（此处的代码）替换为您在中心想要的任何内容。

您有三个选项，其中前两个选项更可靠。

第一个选项使用flex box将项目水平和垂直居中

div{
宽度：100%；
高度：200px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
背景：蓝色；
}
正文{
背景：橙色；
}


水平和垂直居中

我认为你不需要把

标签放在标题中，把它和css对齐

而且，当您使用自己的类时，应该删除

标记

您正在标题中使用100%宽度，因此不应使用left:0

您需要在headerlogo类中使用position:relative，边距为0 auto 到目前为止，我已经使用了html和css，但我认为它会有所帮助

以下是示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home</title>
</head>
<style>
body {margin:0;}
.Header {
    z-index: 100;
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #000000;
    height: 70px;
}

@media screen and (max-width:680px) {
    .Header.responsive {position: relative;}
    .Header.responsive li.icon {
        position: absolute;
        right: 0;
        top: 0;
    }

}
@media (max-width: 960px){
.Header .headerLogo{
    position: relative;
    display: inline-block;
    width: 86px;
    height: 15px;
    margin: 0 auto;
}
}
</style>
</head>
<body>

<div class="Header" id="myHeader">
<a class = "headerLogo">
<i><font size = "6" face = "verdana" color = "white">Lunation Boards</font></i>
</a>
</div>
</body>
</html>


家
正文{页边距：0；}
.标题{
z指数：100；
位置：固定；
排名：0；
宽度：100%；
背景色：#000000；
高度：70像素；
}
@媒体屏幕和屏幕（最大宽度：680px）{
.Header.responsive{位置：相对；}
.Header.li.icon{
位置：绝对位置；
右：0；
排名：0；
}
}
@介质（最大宽度：960像素）{
.Header.headerLogo{
位置：相对位置；
显示：内联块；
宽度：86px；
高度：15px；
保证金：0自动；
}
}
月牙板

和

元素现在已经过时

.Header {
    z-index: 100;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #000000;
    height: 70px;
    display: flex;
    justify-content: center;
}

a {
  width: 100%;
}

h1 {
  margin: 0;
  color: #fff;
}

@media (max-width: 960px){
.Header .headerLogo {
    display: inline-block;
    width: 86px;
    height: 15px;
    margin-left: 6px;
}
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home</title>
</head>
<style>
body {margin:0;}
.Header {
    z-index: 100;
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #000000;
    height: 70px;
}

@media screen and (max-width:680px) {
    .Header.responsive {position: relative;}
    .Header.responsive li.icon {
        position: absolute;
        right: 0;
        top: 0;
    }

}
@media (max-width: 960px){
.Header .headerLogo{
    position: relative;
    display: inline-block;
    width: 86px;
    height: 15px;
    margin: 0 auto;
}
}
</style>
</head>
<body>

<div class="Header" id="myHeader">
<a class = "headerLogo">
<i><font size = "6" face = "verdana" color = "white">Lunation Boards</font></i>
</a>
</div>
</body>
</html>