1. 首页
  2. 问答
  3. 将h1集中在标题中

将h1集中在标题中

2017-02-25 45 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

相关问题

 相关问题