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

<!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>

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

第一个选项使用柔性盒将物品水平和垂直居中。

div { 
 
    width: 100%; 
 
    height: 200px; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    background: blue; 
 
} 
 

 
text { 
 
    background: orange; 
 
}

<div> 
 
    <text>Centered horizontally and vertically</text> 
 
</div>

第二个选项，而不是使用柔性盒，用来父元素的相对位置，为儿童元件的绝对位置，并且也transform: translate(X, Y)为孩子。

div { 
 
    width: 100%; 
 
    height: 200px; 
 
    position: relative; 
 
    background: blue; 
 
} 
 

 
text { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    background: orange; 
 
}

<div> 
 
    <text>Centered horizontally and vertically</text> 
 
</div>

第三个选项，以便竖直地居中元件，采用的是line-height等于父元素的height。

div { 
 
    width: 100%; 
 
    height: 200px; 
 
    position: relative; 
 
    background: blue; 
 
} 
 

 
text { 
 
    position: absolute; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    line-height: 200px; 
 
    background: orange; 
 
}

<div> 
 
    <text>Centered horizontally and vertically</text> 
 
</div>

来源

2017-02-17 20:28:37

这应该是关键。

要清理您的HTML，设置它像这样和删除像<center>和<font>标签：

<div class="Header" id="myHeader"> 
    <a class = "headerLogo"> 
     <h1>Lunation Boards</h1> 
    </a> 
</div>

你也可以使用display: flex居中在你的头件事：

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

这里的充满变化的小提琴：

https://jsfiddle.net/xqamjrvr/

来源

2017-02-17 20:15:12

尝试（您的代码在这里）。用你的代码代替（你的代码在这里）。

来源

2017-02-17 20:18:44 Kenneth

我认为你不需要把<center>标签的头，用CSS对齐。
以及当您使用自己的课程时，您应该删除<header>标记。
您在标题中使用100％宽度，因此您不应该使用left：0;
您需要使用position：headerlogo类中的相对边距：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>

来源

2017-02-17 20:40:58

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

回答

相关问题