Question

我想把我的h1元素集中在标题中，但它只是不起作用。它应位于450px标题的中间，而导航栏位于右上方。如果可能的话，我想在左上方放一个标志。我已尝试使用对齐，位置和边距自动。如果有人可以提供帮助并告诉我我的错误，那就好了，谢谢。

＆＃13;

>>> leftleft = Node(3)
>>> leftright = Node(2)
>>> left = Node(None,leftleft,leftright)
>>> rightleft = Node(9)
>>> rightright = Node(10)
>>> right = Node(None,rightleft,rightright)
>>> node = Node(None, left, right)
>>> number(node)
7
>>> left.number,right.number,node.number
(2, 5, 6)
>>> leftleft.number,leftright.number,left.number,rightleft.number,rightright.number,right.number,node.number
(0, 1, 2, 3, 4, 5, 6)

＆＃13;

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%
}

＆＃13;

Answer 1

首先，您应确保您的标记和CSS规则有效。规则align: right即CSS中不存在。您还忘记了h1 CSS规则中的;。

要使h1居中，您只需将text-align: center;放在其上，同时使nav元素display: block;让它保持在自己的行中。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

尝试将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>

Answer 3

我能够通过以下css调整解决几个问题：

1）为你的导航元素添加宽度：100％

2）为你的h1元素添加宽度：100％

3）将text-align：center添加到你的h1元素

Answer 4

<!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>

Media.PlayerD MyDA = new Media.PlayerD(myAu.AudioPlay);

Answer 5

您的问题最初源于您的浮动<nav>。您尚未清除浮动，这意味着以下元素（h1）受浮动导航的影响。

在clear:both解决问题后，在</nav>处添加div。但是，正如其他人所指出的那样，代码中仍然存在很多错误（缺少分号和边距或填充行仅包含数字，而不是实际的样式属性），您仍然需要应用{{ 1}}如果你想让文本居中，你的h1。我已经纠正并在下面的代码中完成了这个。

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;
  /* 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;
}

编辑：
请注意，如果您没有清除浮动并更正css中的错误，从而获得72px的字体大小，它将显示为元素正确对齐。不过，您的<!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>仍然会在h1之后，问题实际上并未解决。如果您选择减小字体大小，问题将再次出现。

将h1置于标题中

5 个答案: