无法在Google Chrome中的h1元素中居中

时间:2017-05-09 23:35:13

标签: http text centering

我无法将标题集中在chrome中。它在JSfiddle中运行良好,但每当我把它放到chrome中时,它都不会居中。我尝试使用margin:0 auto作为块元素,比如和和align-text:center,但它们都没有工作。 这是我的HTML和CSS

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.container,
.grid {
  margin: 0 auto;
  width: 960px;
}

.container {
  padding-left: 30px;
  padding-right: 30px;
}

.col-1-3 {
  width: 33.33%;
}

.col-2-3 {
  width: 66.66%;
}

.col-1-3 {
  display: inline-block;
  vertical-align: top;
}

.grid,
.col-1-3,
.col-2-3 {
  padding-left: 15px;
  padding-right: 15px;
}


/*
  ==============================
  Primary Header 
  ==============================
*/

.logo {
  text-align: center;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Rysh</title>
  <link rel="stylesheet" href="Assets/stylesheets/main.css">
</head>

<body>
  <header class="container logo">
    <h1>Rysh</h1>
    <nav>
      <a href="shop.html">Shop</a>
      <a href="about.html">About</a>
    </nav>
  </header>
</body>

</html>

enter image description here

enter image description here

任何人都可以看到为什么它无法在Chrome中运行?

1 个答案:

答案 0 :(得分:0)

尝试使用

Rysh

 Rysh

Rysh