H1不居中

Question

我增加字体时，我的H1不居中，如果我的H1尺寸较小（30px）字体，我的H1位置正确。 I want my H1 to be in the center of my banner div and look like this. 目前我的H1距离中心太低而且文字对齐：中心;没有解决这个问题。我需要添加或删除哪些内容才能使我的H1中心或我需要删除或添加一些内容到我的横幅？

Jfiddle

body {
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  font-family: sans-serif;
}

.banner {
  width: 100%;
  background-color: #8F3144;
  height: 300px;
  top: 0px;
}


/* LOGO START*/

.banner>img {
  float: left;
  height: 103px;
  width: 140px;
  color: black;
}


/* LOGO END */

.mainh1 {
  font-weight: bolder;
  text-align: center;
  padding-top: 80px;
  color: #ffffff;
  font-size: 50px;
}

.nav {
  list-style: none;
  text-align: right;
  margin: 0;
}

.nav>li {
  display: inline-block;
  font-size: 20px;
  margin-right: 20px;
  padding-top: 20px;
  font-weight: bolder;
}

.nav>li>a {
  text-decoration: none;
  color: #ffffff;
}

.nav>li>a:hover {
  opacity: .5;
}

<div class="banner">
  <img src="logo.png" alt="logo" />
  <ul class="nav">
    <li class="meetsli"><a href="#">Meets</a></li>
    <li class="aboutli"><a href="">Gallery</a></li>
  </ul>
  <h1 class="mainh1">Harrison TEST TEST TEST TEST</h1>
</div>
</div>

Answer 1

clear: both

这是我相信的答案。将此样式添加到h1标记。

Answer 2

这是因为徽标的大小和位置。您可以使用absolute h1上的width: 100%定位并移除padding。请参阅代码段：

body {
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  font-family: sans-serif;
}

.banner {
  width: 100%;
  background-color: #8F3144;
  height: 300px;
  top: 0px;
}


/* LOGO START*/

.banner>img {
  float: left;
  height: 103px;
  width: 140px;
  color: black;
}


/* LOGO END */

.mainh1 {
  font-weight: bolder;
  text-align: center;
  color: #ffffff;
  font-size: 50px;
  position: absolute;
  width: 100%;
}

.nav {
  list-style: none;
  text-align: right;
  margin: 0;
}

.nav>li {
  display: inline-block;
  font-size: 20px;
  margin-right: 20px;
  padding-top: 20px;
  font-weight: bolder;
}

.nav>li>a {
  text-decoration: none;
  color: #ffffff;
}

.nav>li>a:hover {
  opacity: .5;
}

<div class="banner">
  <img src="logo.png" alt="logo" />
  <ul class="nav">
    <li class="meetsli"><a href="#">Meets</a></li>
    <li class="aboutli"><a href="">Gallery</a></li>
  </ul>
  <h1 class="mainh1">Harrison TEST TEST TEST TEST</h1>
</div>
</div>

Answer 3

将以下两个属性添加到mainh。

<center>

这应该可以解决问题并使其始终居中，尽管它会在大字体的屏幕上消失。

您也可以尝试将其放在{{1}}标记

中