Question

我想在第一个网格中对齐此文本ZENZZEX。完全垂直和水平，我已经将其水平对齐。

body{
  margin: 0;;
}

.navGrid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    height: 40px;
    position: fixed;
  width: 100%;
  top:0;
  background-color: white;
  box-shadow: 0px 5px 10px rgba(0,0,0,0.3);
  
  
}
.span-col-4{
  grid-column: span 4 / auto;
}



.navGrid .first{
  color: black;
  text-align: center;
  font-family: 'Dosis', sans-serif;
  font-size: 1.2em;
  font-weight: 800;
  position: relative;
  top: 20%;
 

}


.navGrid .first:hover{
  cursor: pointer;
  font-size: 1.28em;
}

<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
</head>
<body>
<div class="navGrid">
  <div class="first">ZENZZEX </div>
  <div class="span-col-4 second">Item 2</div>
  <div class="third">Item 3</div>
</div>

<div class="content"><h1>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam hic, adipisci quasi eius nesciunt veniam exercitationem dolorem aperiam id vero perferendis voluptatum ab ad laborum quaerat? Minus exercitationem iure assumenda perspiciatis dolorem ullam? Dolorum accusamus, possimus culpa molestias ipsum sequi animi numquam omnis delectus odio magni id. Obcaecati quo, reiciendis id explicabo veritatis qui excepturi distinctio autem voluptate quaerat dolorem?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla iure ullam, ad nisi distinctio cumque molestiae vitae porro ex nihil facere harum delectus in laborum fugiat corporis maiores deserunt reiciendis laboriosam alias rerum. Nisi corrupti nostrum esse perferendis labore animi iure, nam aut laborum tenetur officia veniam consectetur odio, maxime consequatur deleniti illum harum et dicta quibusdam numquam sit commodi id libero. Facilis, incidunt reprehenderit ad beatae omnis obcaecati adipisci impedit, non quo porro deserunt nemo! Sed quo non reprehenderit! Voluptatibus aspernatur, praesentium harum, quod incidunt fugiat quidem adipisci, itaque pariatur minima deserunt porro velit? Laboriosam, minus! Sit, neque quibusdam.</h1></div>
</body>
</html>

Answer 1

您可以使用flexbox做到这一点：

.navGrid .first {
    color: black;
    text-align: center;
    font-family: 'Dosis', sans-serif;
    font-size: 1.2em;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

在Navbar中将div内的文本居中

1 个答案: