HTML/CSS3-对齐文本问题

我正在尝试将文本与中心位置对齐，但是我对<h1>元素有一些问题，我不明白为什么。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Termoidraulica</title>
    <link href="https://fonts.googleapis.com/css?family=Berkshire+Swash" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
    <link rel="stylesheet" href="css/navbar.css">
    <link rel="stylesheet" href="css/commons.css">
    <link rel="stylesheet" href="css/index.css">
    <style>
.cover {    
    position: relative;
    width: 95%;
    height: 400px;
    margin: 0 auto;
    background-color: #333;
}
.cover-caption {
    position: relative;
    text-align: center;
    left: 50%;
    top: 50%;   
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}
    </style>
</head>
<body>
    <section class="cover">
        <div class="cover-caption">
            <h1 class="cover-title">TITLE</h1>
            <p class="cover-subtitle">Subtitle</p>
            <button class="cover-btn">SHOP NOW!</button>
        </div>
    </section>    
</body>
</html>

在Codepen上，我粘贴了所有代码，如果这里太困惑了。链接

预先感谢

问题来自您指定height:40px的Navbar元素。因此，您可以删除此值以使其自动或添加overflow: hidden（这将解决您的实际代码问题）。

顺便说一句，您在.navbar内有float元素.navbar-menu，因为您无法正确清除浮子，因此正在引起问题。您还可以考虑在包含标题的部分之前添加<div class="clearfix"></div>，而不是将clearfix类添加到上一个容器中。

这是完整的代码：

body {
  background-color: #eee;
  margin: 0;
  padding: 0;
  color: #eee;
}
a {
  text-decoration: none;
}
.navbar {
  background-color: #eee;
  height: 40px;
}
.navbar-logo {
  color: #409be8;
  float: left;
  display: block;
  padding: 0.7em 0 0 2.5%;
  font-size: 1.5em;
}
.navbar-menu {
  float: right;
  margin: 0;
  padding: 0 2.5% 0 0;
}
.navbar-menu-item {
  display: inline-block;
}
.navbar-menu-item a {
  display: block;
  padding: 0 1em;
  color: #409be8;
  line-height: 60px;
  font-size: 18px;
  -webkit-transition: background-color 0.5s linear;
  transition: background-color 0.5s linear;
}
.navbar-menu-item a:hover {
  background-color: #409be8;
  color: #eee;
}
.navbar-menu-icon {
  display: none;
  float: right;
  padding: 1.2em 1.2em 0 0;
}
.navbar-menu-icon span {
  display: block;
  height: 3px;
  width: 30px;
  background-color: #409be8;
  margin-bottom: 5px;
}
.animate {
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
.clearfix {
  clear: both;
}
.cover {
  position: relative;
  width: 95%;
  height: 400px;
  margin: 0 auto;
  background-color: #333;
}
.cover-caption {
  position: relative;
  text-align: center;
}
.cover-title {
  font-family: 'Berkshire Swash', cursive;
}

<section class="navbar">
  <a href="" class="navbar-logo">Logo</a>
  <a href="" class="navbar-menu-icon">
    <span></span>
    <span></span>
    <span></span>
  </a>
  <ul class="navbar-menu animate">
    <li class="navbar-menu-item"><a href="">item 1</a></li>
    <li class="navbar-menu-item"><a href="">item 2</a></li>
    <li class="navbar-menu-item"><a href="">item 3</a></li>
    <li class="navbar-menu-item"><a href="">item 4</a></li>
    <li class="navbar-menu-item"><a href="">item 5</a></li>
    <li class="navbar-menu-item"><a href="">item 6</a></li>
    <li class="navbar-menu-item"><a href="">item 7</a></li>
  </ul>
</section>
<div class="clearfix"></div>
<section class="cover">
  <div class="cover-caption">
    <h1 class="cover-title">TITLE</h1>
    <p class="cover-subtitle">Subtitle</p>
    <button class="cover-btn">SHOP NOW!</button>
  </div>
</section>

第一个<section>中.clearfix:after的clear: both没有生效 - 我以前从未尝试过在:after中清除，并且不知道它是否有效，但是很明显它在这里不工作。

我的实验中的简单修复是将clear: both添加到包含不当行为<h1>的<section>。

相关内容

最新更新

热门标签：