Question

我试图将文字对齐到中心位置，但我对<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上我粘贴了所有代码，如果这里太混乱了。 LINK

提前致谢

通过

Answer 1

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

顺便说一下，.navbar-menu中的浮动元素.navbar会出现问题，因为您没有正确清除浮动。您还可以考虑在包含标题的部分之前添加<div class="clearfix"></div>，而不是将clearfix类添加到上一个容器中。

以下是完整代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

第一个clear: both中.clearfix:after的{{1}}未生效 - 我以前从未试图在<section>中清除，也不知道是否它意味着工作，但显然不能在这里工作。

在我的实验中轻松修复是将:after添加到包含行为不端clear: both的{{1}}。

HTML / CSS3 - 对齐文本问题

2 个答案: