1. 首頁
  2. 問答
  3. 將h1集中在標題中

將h1集中在標題中

2017-02-25 32 views
1

我想將標題中的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

+1

你想讓nav和h1在同一行嗎？你可以上傳一張你想要的圖片嗎？ – andreas

回答

0

首先，你應該確保，您的標記和你的CSS規則是有效的。規則align: right即CSS中不存在。你也在你的h1 CSS規則中忘記了;。

要將h1置於中心位置，您可以在其上放置text-align: center;，同時使nav元素爲display: block;以讓它保持其自己的行。

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

0

嘗試增加display: inline-block;，text-align: center;和width: 100%;到H1標題。

h1 { 
    font-size: 72px; 

    width: 100%; 
    display: inline-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; 
 
} 
 
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

0

我能夠解決幾個問題與下面的CSS調整：

1）將寬度： 100％給你導航元素

2）add荷蘭國際集團寬度：100％添加的text-align您的H1元素

3）：中心的H1元素

來源

2017-02-25 17:04:23

0 

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

0

你的問題最初是從你的浮動<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>

編輯：
請注意，如果不清除浮動，並在CSS糾正你的錯誤，從而得到的72px字體大小，它會出現，如果元素正確對齊。但是您的h1仍然會落在您的nav之後，問題實際上並未得到解決。如果您選擇減小字體大小，問題將再次出現。

來源

2017-02-25 17:15:25

相關問題

 相關問題