ヘッダーテキストを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>

3つのオプション、があり、最初の2つのオプションはより信頼性が高いです。

最初のオプションは、フレックスボックスを使用して項目を水平および垂直にセンタリングします。

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>

第2のオプションは、代わりに、フレックスボックスを使用する、子供のために、親要素の相対位置、子要素の絶対位置、及び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>

第三の選択肢は、垂直要素をセンタリングするために、親要素のheightに等しいline-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

私は、CSSの位置に合わせ、ヘッダに<center>タグを配置する必要がいけないと思います。
また、独自のクラスを使用している場合は、<header>タグを削除する必要があります。
ヘッダーに100％の幅を使用しているため、left：0を使用しないでください。
position：relativeを使用する必要があります。margin：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のナビゲーションメニューの中央に配置するにはどうすればいいですか？

答えて

関連する問題