如何使列表项垂直居中？

Question

如何使列表项垂直居中？

我坚持使用这段代码.

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

Run Code Online (Sandbox Code Playgroud)

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

整个代码

Answer 1

Zub*_*ber 5

像这样在a标签之外移动标签nav,无需更改任何其他内容.运行snippetin full-page以查看它的运行情况

body {
  background-color: #efefef;
  margin: 0px;
}

.hwrap {
  display: flex;
  min-height: 100vh;
}

.hwrap header {
  width: 135px;
  background-color: white;
  padding: 30px 0px;
  margin: 0px;
}
.hwrap header .h-position {
  top: 0;
  left: 0;
  bottom: 0;
  width: 135px;
  justify-content: center;
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  vertical-align: baseline;
}
.hwrap header .logo {
  background-image: url(https://blog.codepen.io/wp-content/uploads/2012/06/Button-Fill-Black-Large.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 80px;
  padding: 0;
  margin: 0;
}
.hwrap header nav ul {
  list-style: none;
  margin: 20px 0;
  padding: 0 20px 0 0;
  text-align: right;
}
.hwrap header nav li {
  margin-bottom: 20px;
}
.hwrap header nav li:last-child {
  margin-bottom: 0;
}
.hwrap header .e-link {
  display: block;
  text-align: right;
  padding-right: 20px;
}

Run Code Online (Sandbox Code Playgroud)

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div class='hwrap'>
  <header>
    <div class='h-position'>
    <div class='logo'></div>
    
    <nav>
      <ul>
        <li><a href="">1</a></li>
        <li><a href="">2</a></li>
        <li><a href="">3</a></li>
      </ul>
      
    </nav>
      <a href="mailto:ost.kost@gmail.com" class='e-link'>Email me</a>
     </div> 
   </div> 
  </header>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，6 月前
查看次数：	65 次
最近记录：	7 年，6 月前