ヘッダーのh1の中央揃え

h1要素をヘッダーの中央に配置したいが、それはうまくいかない。これは450pxヘッダーの中央に、ナビゲーションバーは右上にとどめてください。可能であれば、私は左上にロゴを入れたいと思っています。私は整列、位置とマージンの自動でそれを試してみました。もし誰かが助けて私に私のエラーを見せることができれば、それはうれしいよ、ありがとう。ヘッダーのh1の中央揃え

body { 
 
    background-color: #999; 
 
    font-family: times; 
 
} 
 
header { 
 
    height: 450px; 
 
    background: url(../Pictures/Flensburg.jpg) center center fixed; 
 
    background-size: cover; 
 
} 
 
nav { 
 
    float: right; 
 
    30px 30px 0 0; 
 
} 
 
ul{ 
 
    display: inline; 
 
    align: right; 
 
    list-style-type: none; 
 
    padding: 10px 
 
} 
 
li { 
 
    display: inline-block; 
 
    padding: 10px 
 
} 
 
a { 
 
    background-color: #b3b3b3; 
 
    color: white; 
 
    text-transform: uppercase; 
 
} 
 
h1 { 
 
    font-size: 72px 
 
    width: 100% 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>Keanu</title> 
 
    <link href="CSS/Main.css" rel="stylesheet" type="text/css"> 
 
    </head> 
 
    <body> 
 
    <header> 
 
    <nav> 
 
     <ul> 
 
    <li><a href="Index.html">Home</a></li> 
 
    <li><a href="About Me.html">About Me</a></li> 
 
    <li><a href="Portfolio.html">Portfolio</a></li> 
 
    <li><a href="Testimonial.html">Testimonial</a></li> 
 
    <li><a href="Contact.html">Contact</a></li> 
 
    </ul> 
 
    </nav> 
 
    <h1>My Personal Website</h1> 
 
</header> 
 
<footer> 
 

 
</footer> 
 
    </body> 
 
</html>

出典

2017-02-25 Keanu

navとh1を同じ行にしますか？達成したい写真をアップロードできますか？ – andreas

まず、あなたのマークアップとあなたのCSSルールが有効であることを、確認する必要があります。ルールalign: rightは、CSSには存在しません。また、あなたのh1 CSSルールに;を忘れてしまった。

h1の中央に置くには、navの要素をdisplay: block;にして、それ自身の行に留まらせながら、text-align: center;を置くことができます。

body { 
 
    background-color: #999; 
 
    font-family: Times; 
 
} 
 

 
header { 
 
    height: 450px; 
 
    background: url(../Pictures/Flensburg.jpg) center center fixed; 
 
    background-size: cover; 
 
} 
 

 
ul { 
 
    display: block; 
 
    text-align: right; 
 
    list-style-type: none; 
 
    padding: 10px; 
 
} 
 

 
li { 
 
    display: inline-block; 
 
    padding: 10px; 
 
} 
 

 
a { 
 
    background-color: #b3b3b3; 
 
    color: white; 
 
    text-transform: uppercase; 
 
} 
 

 
h1 { 
 
    font-size: 72px; 
 
    width: 100%; 
 
    text-align: center; 
 
}

<header> 
 
    <nav> 
 
    <ul> 
 
     <li><a href="Index.html">Home</a></li> 
 
     <li><a href="About Me.html">About Me</a></li> 
 
     <li><a href="Portfolio.html">Portfolio</a></li> 
 
     <li><a href="Testimonial.html">Testimonial</a></li> 
 
     <li><a href="Contact.html">Contact</a></li> 
 
    </ul> 
 
    </nav> 
 
    <h1>My Personal Website</h1> 
 
</header>

出典

2017-02-25 17:03:02 andreas

H1の見出しにdisplay: inline-block;、text-align: center;とwidth: 100%;を追加してみてください。

h1 { 
    font-size: 72px; 

    width: 100%; 
    display: inline-block; 
    text-align: center; 
}

以下

完全な編集コード：幅を追加）

1：

body { 
 
    background-color: #999; 
 
    font-family: times; 
 
} 
 
header { 
 
    height: 450px; 
 
    background: url(../Pictures/Flensburg.jpg) center center fixed; 
 
    background-size: cover; 
 
} 
 
nav { 
 
    float: right; 
 
    30px 30px 0 0; 
 
} 
 
ul{ 
 
    display: inline; 
 
    align: right; 
 
    list-style-type: none; 
 
    padding: 10px 
 
} 
 
li { 
 
    display: inline-block; 
 
    padding: 10px 
 
} 
 
a { 
 
    background-color: #b3b3b3; 
 
    color: white; 
 
    text-transform: uppercase; 
 
} 
 
h1 { 
 
    font-size: 72px; 
 
    width: 100%; 
 
    display: inline-block; 
 
    text-align: center; 
 
}

<header> 
 
    <nav> 
 
    <ul> 
 
     <li><a href="Index.html">Home</a></li> 
 
     <li><a href="About Me.html">About Me</a></li> 
 
     <li><a href="Portfolio.html">Portfolio</a></li> 
 
     <li><a href="Testimonial.html">Testimonial</a></li> 
 
     <li><a href="Contact.html">Contact</a></li> 
 
    </ul> 
 
    </nav> 
 
    <h1>My Personal Website</h1> 
 
</header> 
 
<footer> 
 

 
</footer>

出典

2017-02-25 17:03:13

私は次のCSSの調整の問題のいくつかを解決することができました： 100％あなたにnavエレメント

2）add幅をINGの：あなたのh1要素に100％

3）テキスト整列を追加：あなたのh1要素にセンター

出典

2017-02-25 17:04:23

body { 
 
    background-color: #999; 
 
    font-family: times; 
 
} 
 
header { 
 
    height: 450px; 
 
    background: url(../Pictures/Flensburg.jpg) center center fixed; 
 
    background-size: cover; 
 
} 
 
nav { 
 
    float: right; 
 
    30px 30px 0 0; 
 
} 
 
ul{ 
 
    display: inline; 
 
    align: right; 
 
    list-style-type: none; 
 
    padding: 10px 
 
} 
 
li { 
 
    display: inline-block; 
 
    padding: 10px 
 
} 
 
a { 
 
    background-color: #b3b3b3; 
 
    color: white; 
 
    text-transform: uppercase; 
 
} 
 
h1 { 
 
    font-size: 72px 
 
    width: 100%; 
 
text-align:center; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>Keanu</title> 
 
    <link href="CSS/Main.css" rel="stylesheet" type="text/css"> 
 
    </head> 
 
    <body> 
 
    <header> 
 
    <nav> 
 
     <ul> 
 
    <li><a href="Index.html">Home</a></li> 
 
    <li><a href="About Me.html">About Me</a></li> 
 
    <li><a href="Portfolio.html">Portfolio</a></li> 
 
    <li><a href="Testimonial.html">Testimonial</a></li> 
 
    <li><a href="Contact.html">Contact</a></li> 
 
    </ul> 
 
    </nav> 
 
    <h1>My Personal Website</h1> 
 
</header> 
 
<footer> 
 

 
</footer> 
 
    </body> 
 
</html>

出典

2017-02-25 17:06:03

をあなたの問題は、もともとあなた浮かべ<nav>に由来します。あなたは浮動小数点をクリアしていません。つまり、次の要素（h1）はフローティングされたナビゲーションの影響を受けます。

</nav>の後にclear:bothでdivを追加すると問題が解決します。しかし、他の人に指摘されているように、コードには多くの誤りがあります（実際のスタイリングプロパティではなく数字のみを含むセミコロンと余白またはパディングラインがありません）。そしてまだtext-align:centerを適用する必要がありますテキストを中央揃えにしたい場合は、h1を入力します。私は修正して、コードの下でこれを行った。

body { 
 
    background-color: #999; 
 
    font-family: times; 
 
} 
 
header { 
 
    height: 450px; 
 
    background: url(../Pictures/Flensburg.jpg) center center fixed; 
 
    background-size: cover; 
 
} 
 
nav { 
 
    float: right; 
 
    /* The previous line beneath was "30px 30px 0 0;" - I assumed you wanted a margin. Change if not */ 
 
    margin: 30px 30px 0 0; 
 
} 
 
ul{ 
 
    display: inline; 
 
    align: right; 
 
    list-style-type: none; 
 
    padding: 10px; 
 
} 
 
li { 
 
    display: inline-block; 
 
    padding: 10px; 
 
} 
 
a { 
 
    background-color: #b3b3b3; 
 
    color: white; 
 
    text-transform: uppercase; 
 
} 
 
h1 { 
 
    font-size: 72px; 
 
    width: 100%; 
 
text-align:center; 
 
} 
 
.clear{ 
 
clear:both; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>Keanu</title> 
 
    <link href="CSS/Main.css" rel="stylesheet" type="text/css"> 
 
    </head> 
 
    <body> 
 
    <header> 
 
    <nav> 
 
     <ul> 
 
    <li><a href="Index.html">Home</a></li> 
 
    <li><a href="About Me.html">About Me</a></li> 
 
    <li><a href="Portfolio.html">Portfolio</a></li> 
 
    <li><a href="Testimonial.html">Testimonial</a></li> 
 
    <li><a href="Contact.html">Contact</a></li> 
 
    </ul> 
 
    </nav> 
 
<div class="clear"></div> 
 
    <h1>My Personal Website</h1> 
 
</header> 
 
<footer> 
 

 
</footer> 
 
    </body> 
 
</html>

編集：あなたはフロートをクリアし、それによって72pxのフォントサイズを取得し、CSSで自分のエラーを修正しない場合、それは要素かのように表示されること
注意正しく整列されている。しかし、あなたのh1はまだあなたのnavの背後にあり、問題は実際には解決されません。フォントサイズを小さくすると、問題が再現されます。

出典

2017-02-25 17:15:25

ヘッダーのh1の中央揃え

答えて

関連する問題