时间戳

首页 > 解决方案 > 使 CSS Grid 项目内的列表项目保持在中心垂直对齐，即使在调整视口宽度时也是如此

css - 使 CSS Grid 项目内的列表项目保持在中心垂直对齐，即使在调整视口宽度时也是如此

问题描述

大家好，非常感谢所有试图帮助我们新手编码的人。

我正在尝试在导航栏/网格项内垂直对齐我的列表项。

如您所见，即使我调整视口的大小，左侧的徽标也会很好地垂直保持在中间。但是导航按钮没有。

我会把所有东西都放在一支笔里，但你看不到它，你只能用检查元素和 50% 的缩放来看到它。

我错过了什么？

谢谢！

            * {
            padding: 0;
            box-sizing: border-box;
            border-radius: 5px;
            text-align: center;
        }
        
            body {
            background: #F7DAD4;
            }
        
        
        .grid {
            display: grid;
            height: 98vh;
            grid-template-columns: 1fr 4fr 1fr;
            grid-template-rows: 0.5fr 1fr 3.5fr 1fr;
            grid-gap: 2vh;
            grid-template-areas: "nav nav nav" "header header header" "left main right" "footer footer footer";
            
        
        }
        
        nav {
            background: #0A3409;
            color: #F7DAD4;
            grid-area: nav;
            position: relative;
        }
                
        .logo {
            float: left;
            position: relative;
            left: 10vw;
            top: 50%;
            transform: translate(0, -50%);
        
        
        }
        
        
        .logo a {
            color: #F7DAD4;
            text-decoration: none;
            font-family: arial black;
            font-size:  2em;
        
        }
        
        
        ul {
            float: right;
            list-style: none;
        }
        
        
        ul li {
            position: relative;
            display: inline;
            right: 10vw;
            top: 50%;
            transform: translate(0, -50%);
            border: 1px solid white;
        }
        
        li a {
            text-decoration: none;
            color: #F7DAD4;
            font-family: arial;
            font-weight: bold;
            font-size: 1.5em;
            transition: 0.2s;
            border-radius: initial;
            padding: 0 20px;
        }
        
        
        li a:hover {
            color: #0A3409;
            background-color: #F7DAD4;
        
        }
                
        header {
            background: #0A3409;
            color: #F7DAD4;
            grid-area: header;
        
        }
        
        .left {
            background: #FD3A0F;
            color: #F7DAD4;
            grid-area: left;
        
        }
        
        main {
            background: #559E54;
            color: #0A3409;
            grid-area: main;
        
        }
        
        
        .right {
            background: #17B814;
            color: #F7DAD4;
            grid-area: right;
        
        }
        
        footer {
            background: #0A3409;
            color: #F7DAD4;
            grid-area: footer;
        
        }
        
        
        @media only screen and (max-width: 768px) {
        
            .grid {
                grid-template-columns: 3fr 2fr;
                grid-template-rows: 0.5fr 1fr 1.75fr 1.75fr 1fr;
                grid-template-areas: "nav nav" "header header" "main left" "main right" "footer footer";
            }
        }
                
        @media only screen and (max-width: 500px) {
                .grid {
                grid-template-columns: 1fr;
                grid-template-rows: 0.5fr 1fr 3.5fr 1fr 1fr 1fr;
                grid-template-areas: "nav" "header" "main" "left" "right" "footer";
            }
        }
<div class="grid">

    <nav>
        <div class="logo">
            <a href="#">danctes</a>
        </div>

        <ul>
            <li><a href="#">Funny</a></li>
            <li><a href="#">Relatable</a></li>
            <li><a href="#">Dark</a></li>
            <li><a href="#">Latest</a></li>
            <li><a href="#">Best</a></li>
        </ul>
    </nav>

    <header>Header</header>
    
    <div class="left">Left</div>
    
    <main>Main</main>
    
    <div class="right">Right</div>
    
    <footer>Footer</footer>
    
    </div>

标签： csscss-gridvertical-alignment

解决方案

考虑在定位UI元素时使用Flexbox而不是transforms和float，我注释掉了代码中的变化，你应该很容易阅读

* {
  margin:0; /* New */
  padding: 0;
  box-sizing: border-box;
  border-radius: 5px;
  text-align: center;
}

body {
  background: #F7DAD4;
}

.grid {
  display: grid;
  height: 98vh;
  grid-template-columns: 1fr 4fr 1fr;
  grid-template-rows: 0.5fr 1fr 3.5fr 1fr;
  grid-gap: 2vh;
  grid-template-areas: "nav nav nav" "header header header" "left main right" "footer footer footer";
}

nav {
    background: #0A3409;
    color: #F7DAD4;
    grid-area: nav;
    position: relative;
    /* NEW */
    display: flex;
    height: 100%;
}

.logo {
    /* NEW */
    display: flex;
    height: 100%;
    align-items: center;
    /* Removed 
    /* float: left; 
    /* position: relative; 
    /* left: 10vw; 
    /* top: 50%; 
    /* transform: translate(0, -50%); */
}

.logo a {
  color: #F7DAD4;
  text-decoration: none;
  font-family: arial black;
  font-size: 2em;
}

ul {
    list-style: none;
    /* NEW */
    display: flex;
    margin-left: auto;
    height: 100%;
    align-items: center;
    /* Removed 
    /* float: right; */
}

ul li {
    border: 1px solid white;
    
    /* Removed
    /*   position: relative; */
    /*   display: inline; */
    /*   right: 10vw; */
    /*   top: 50%; */
    /*   transform: translate(0, -50%); */
}

li a {
  text-decoration: none;
  color: #F7DAD4;
  font-family: arial;
  font-weight: bold;
  font-size: 1.5em;
  transition: 0.2s;
  border-radius: initial;
  padding: 0 20px;
}

li a:hover {
  color: #0A3409;
  background-color: #F7DAD4;
}

header {
  background: #0A3409;
  color: #F7DAD4;
  grid-area: header;
}

.left {
  background: #FD3A0F;
  color: #F7DAD4;
  grid-area: left;
}

main {
  background: #559E54;
  color: #0A3409;
  grid-area: main;
}

.right {
  background: #17B814;
  color: #F7DAD4;
  grid-area: right;
}

footer {
  background: #0A3409;
  color: #F7DAD4;
  grid-area: footer;
}

@media only screen and (max-width: 768px) {
  .grid {
    grid-template-columns: 3fr 2fr;
    grid-template-rows: 0.5fr 1fr 1.75fr 1.75fr 1fr;
    grid-template-areas: "nav nav" "header header" "main left" "main right" "footer footer";
  }
}

@media only screen and (max-width: 500px) {
  .grid {
    grid-template-columns: 1fr;
    grid-template-rows: 0.5fr 1fr 3.5fr 1fr 1fr 1fr;
    grid-template-areas: "nav" "header" "main" "left" "right" "footer";
  }
}
<div class="grid">
  <nav>
    <div class="logo">
      <a href="#">danctes</a>
    </div>
    <ul>
      <li><a href="#">Funny</a></li>
      <li><a href="#">Relatable</a></li>
      <li><a href="#">Dark</a></li>
      <li><a href="#">Latest</a></li>
      <li><a href="#">Best</a></li>
    </ul>
  </nav>
  <header>Header</header>
  <div class="left">Left</div>
  <main>Main</main>
  <div class="right">Right</div>
  <footer>Footer</footer>
</div>

推荐阅读