Question

我试图将div放置在网格标题的中心，但是我的许多尝试都失败了。

这里是代码笔的链接：https://codepen.io/ZeePintor/pen/OKxLRe

这是html代码：

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Ermesinde Clube de Karaté</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://fonts.googleapis.com/css?family=Montserrat:900|Work+Sans:300" rel="stylesheet">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style2.css">

  </head>
  <body>
    <div class="wrapper">
      <div class="header">
        <div class="brand">
            <img src="/images/eck_logo.png">
            <div class="page-headers">
              <h1>ECK</h1>
              <h3>ERMESINDE CLUBE KARATE</h3>
          </div>
        </div>
      </div>
      <div class="section1">Section1</div>
      <div class="section2">Section2</div>
      <div class="footer">Footer</div>
    </div>

  </body>
</html>

这是CSS：

.wrapper{
    display:grid;
    width:100%;
    background-color:#e3e3e3;
    grid-template-rows: 
    [grid-start hd-start] 100vh 
    [hd-end sc1-start] 100vh 
    [sc1-end sc2-start] 100vh 
    [sc2-end ft-start] 125px 
    [ft-end grid-end];
    grid-template-columns: 100%;
}

div div:hover{
    border:1px solid black;
}

/*
HEADER 
*/
.header{
    grid-row:hd;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../images/black_belt_stock_photo.jpg);
}

.brand{
    grid-row: brand;
    display:flex;
    justify-content:flex-end;
}

.brand img{
    border: 2px rgb(109, 12, 12) solid;
    border-radius: 50%;
}


.brand h1{
    color:white;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
}

.brand h3{
    color:white;
    font-family: 'Work Sans', sans-serif;
    font-weight: 300;
}



.section1{
    grid-row:sc1;
}

.section2{
    grid-row:sc2;
}

.footer{
    grid-row:ft;
}

这应该是用户打开页面时页面的大标题，动画可能会添加到标题和图像中，但是首先我想在将元素与最右边对齐的同时垂直居中。

我试图通过以下方式在CSS中移动： -位置：绝对； -垂直对齐：居中； -证明内容：正确； align-content：center;

但是这些都不对我有用，所以请有人帮我吗？谢谢。

Answer 1

这可能对您有用：

.brand{
    grid-row: brand;
    display:flex;
    justify-content:flex-end;
    position: absolute;
    right: 2rem;
    top: 50%;
    margin-top: -160px; /* 1/2 image height */
}

在CSS网格项中定位元素

1 个答案: