Как сделать элементы списка вертикально центрированными? - PullRequest
Новая
       3

Как сделать элементы списка вертикально центрированными?

0 голосов
/ 11 мая 2018

Я застрял с этим фрагментом кода. 

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

Эти три элемента должны быть вертикально центрированы (как показано на рисунке) These three elements should be vertically centered(as shown in pic)

ВСЕ КОД

Ответы [ 3 ]

0 голосов
/ 11 мая 2018

переместите тег a за пределы тега nav, как это, не нужно ничего менять. запустите snippet в 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;
}
<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>
0 голосов
/ 11 мая 2018

Здесь мы идем, просто по-другому, используя таблицу отображения и ячейку таблицы, она принимает вертикальное выравнивание по середине. 

<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>

css: 

html, body {
  height: 100%;
}

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

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

вы можете проверить https://codepen.io/silabhijit/pen/oddjdg

0 голосов
/ 11 мая 2018

Вот это: 

.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;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...