Question

我想使导航项（li）垂直居中，白色部分恰好一半，灰白色部分恰好另一半。

我尝试使用“ top：-0.83rem;”但自从我盯着它看时，我不确定它是否居中。

grouped_df <- df %>%
              group_by(zipcode) %>%
              summarise(rate = min(rate))

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: none;
}

.section-border {
  border: 30px solid #ffffff;
  background-color: #f8f7f3;
}

.section-wrap {
  min-height: 600px;
}

.header {
  position: relative;
  margin-left: 1rem;
  margin-right: 1rem;
}

.menu {
  position: absolute;
  top: -0.83rem;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 920px;
  line-height: 1.5em;
}

li {
  display: inline-block;
  font-size: 11px;
}

@media only screen and (min-width: 601px) {
  .home-link {
    flex-grow: 0;
  }
  li {
    text-align: right;
    flex-grow: 1;
    font-size: 16px;
  }
  .menu {
    display: flex;
    flex: 1;
  }
}

我希望所有五个导航项目在垂直方向上居中完美，而与字体大小无关。项目的1/2应该在白色部分上，而1/2应该在灰白色部分上。

Answer 1

尝试一下，我更改了.menu和li样式：

*, *:before, *:after { 
        box-sizing: border-box; margin: 0; padding: 0;
        border: none; 
      }

      .section-border {
        border: 30px solid #ffffff;
        background-color: #f8f7f3;
      }

      .section-wrap {
        min-height: 600px;
      }

      .header {
        position: relative;
        margin-left: 1rem;
        margin-right: 1rem; 
      }

      .menu {
        transform: translateY(-50%);
        margin: auto;
        width: 100%;
        max-width: 920px;
        line-height: 1.5em;
      }

      li {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 11px;
      }


      @media only screen and (min-width: 601px) {
        .home-link {
          flex-grow: 0;
        }

        li {
          text-align: right;
          flex-grow: 1;
          font-size: 16px;
        }

        .menu {
          display: flex;
          flex: 1;
        }
      }

<div class="section-border">
    <div class="section-wrap">
      <header class="header">
        <nav role="navigation">
          <ul class="menu">
            <li class="home-link"><a href="#"><img src="https://www.nicolefenton.com/_/images/dec/circle-menu.svg" height="12" width="12" alt=""></a></li>
            <li><a href="#">test<br>test</a></li>
            <li><a href="#">Writing</a></li>
            <li><a href="#">Speaking</a></li>
            <li><a href="#">Projects</a></li>
          </ul>
        </nav>
      </header>
    </div>
  </div>

Answer 2

通过absolute定位来实现孩子相对于父元素的水平和垂直居中的一种方法是使用transform属性：

.wrapper {
  position: relative;
  height: 200px;
  width: 100%;
  background: pink;
}

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  background: yellow;
  
  /* Translate the center element in top-left
  direction relative to its own dimensions to
  achieve center placement relative to parent */
  transform: translate(-50%, -50%);
}

/* Not needed - resets the list to prevent non-centered appearance */
ul, li {
  padding:0;
  margin:0;
  list-style:none;
}

<div class="wrapper">
  <div class="center">
    <ul>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ul>
  </div>
</div>

此处.center的左上角位于.wrapper的中心。然后，我们使用transform: translate(-50%, -50%)来使.center相对于其自身尺寸的位置偏移，这意味着它的中心移到了.wrapper的中心。

请注意，translate的百分比相对于.center元素的尺寸，这意味着无论列表的动态宽度/高度如何，.center始终位于.wrapper

的中间

完美居中绝对定位的项目，而不管字体大小

2 个答案: