Html 如何使列表项垂直居中？_Html_Css_Sass

Html 如何使列表项垂直居中？

html css sass

Html 如何使列表项垂直居中？,html,css,sass,Html,Css,Sass,我被这段代码困住了 .hwrap header .h-position { top: 0; left: 0; bottom: 0; width: 135px; position: fixed; display: flex; flex-direction: column; justify-content: space-between; } 这三个元素应垂直居中，如图所示这是： .hwrap header .h-position { top:

我被这段代码困住了

.hwrap header .h-position {
   top: 0;
   left: 0;
   bottom: 0;
   width: 135px;
   position: fixed;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

这三个元素应垂直居中，如图所示

这是：

.hwrap header .h-position {
  top: 0;
  left: 0;
  bottom: 0;
  width: 135px;
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height:100%;
  align-items:center;
}

像这样将a标记移到导航标记外，无需更改任何其他内容。在整个页面中运行代码段以查看它的运行情况

身体{ 背景色：EFEF；边际：0px； } hwrap先生{ 显示器：flex；最小高度：100vh； } .hwrap标题{ 宽度：135px；背景色：白色；填充：30px 0px；边际：0px； } .hwrap收割台.h位置{ 排名：0；左：0；底部：0；宽度：135px；证明内容：中心；位置：固定；显示器：flex；弯曲方向：立柱；证明内容：之间的空间；垂直对齐：基线； } .hwrap标题.logo{ 背景图像：urlhttps://blog.codepen.io/wp-content/uploads/2012/06/Button-Fill-Black-Large.png; 背景重复：无重复；背景位置：中心；背景尺寸：包含；高度：80px；填充：0；保证金：0； } .hwrap收割台导航ul{ 列表样式：无；利润率：20px0；填充：0 20px 0 0；文本对齐：右对齐； } .hwrap头导航李{ 边缘底部：20px； } .hwrap头导航李：最后一个孩子{ 页边距底部：0； } .hwrap头文件.e-link{ 显示：块；文本对齐：右对齐；右边填充：20px； } 文件

这是另一种使用显示表格和表格单元格的方式，它接受垂直对齐中间

<html>
  <body>
    <div class="container">
      <div class="inner-container">
        <ul class="list">
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ul>
      </div>
    </div>
  </body>
</html>

<>你可以检查

不幸的是，这不起作用：元素在同一位置，图像已经消失了，谢谢你，你帮了一个忙，解决了你的问题，请考虑通过点击复选标记来接受它。这向更广泛的社区表明，你已经找到了一个解决方案，并给回答者和你自己带来了一些声誉。没有义务这样做@如果我的回答对你有帮助，请接受我的回答。@jsquestions寻求代码帮助必须包括在问题本身中重现它所需的最短代码，最好是在堆栈片段中。虽然您提供了一个链接，但如果该链接无效，您的问题对其他将来遇到相同问题的用户将毫无价值。看见

html, body {
  height: 100%;
}

.container {
  display: table;
  height: 100%;
}

.inner-container {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
}