Como centrar o texto do cabeçalho no meio do menu Navegação em html
estou a pensar como centrar o texto do cabeçalho que escrevi no centro do menu de navegação que criei, o texto já está centrado, mas está centrado no topo do menu de navegação, não no meio, que é o que eu preciso.
<!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>
4 answers
Você tem três opções, em que as duas primeiras opções são muito mais confiáveis .
A primeira opção usa o Flex-box para centrar o item horizontal e verticalmente.
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>
A segunda opção, em vez de usar a caixa de flexão, usa uma posição relativa para o elemento-mãe, uma posição absoluta para o elemento-filho, e transform: translate(X, Y)
também para a crianca.
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>
A terceira opção, a fim de centrar o elemento verticalmente, usa um line-height
que é igual a height
do elemento-mãe.
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>
Para limpar o seu HTML, configure-o assim e remova as marcas como <center>
e <font>
:
<div class="Header" id="myHeader">
<a class = "headerLogo">
<h1>Lunation Boards</h1>
</a>
</div>
E você pode usar display: flex
para centrar as coisas no seu cabeçalho:
.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;
}
}
Aqui está o violino completo com as mudanças.
Tente (o seu código aqui). Substitua: (o seu código aqui) com waht sempre que você quiser int centro.
- acho que não precisas de colocar
<center>
marca no cabeçalho, alinhá-la com o css. - e também quando estiver a usar a sua própria classe deve remover a etiqueta {[[2]}.
- está a usar 100% de largura no cabeçalho, por isso não deve usar o left: 0;
- Tem de usar a posição: relativa na classe de cabeçalho com margem: 0 auto;
Já usei html e css até agora, mas acho que vai ajudar
Aqui está o código da amostra:
<!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>