вертикальная и горизонтальная центрированная липкая боковая панель с flexbox - PullRequest
Новая
       13

вертикальная и горизонтальная центрированная липкая боковая панель с flexbox

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

Я пытаюсь создать липкую боковую панель, в которой навигация располагается по центру по вертикали и горизонтали. Что очень легко с flexbox. Но когда я добавил «position: fixed» и «height: 100%», он больше не центрируется по горизонтали. Есть ли еще что-то, зачем это нужно делать, а центрировать все равно? 

.sidebar {
  background: #223556;
  width: 100px;
  position: fixed;
  height: 100%;
}
<aside class="sidebar flex justify-center align-center">
  <ul class="nav">
    <li><a href="index.php"><span class="sf sf-home-o"></span></a></li>
    <li><a href="about.php"><span class="sf sf-user-o"></span></a></li>
    <li><a href="projects.php"><span class="sf sf-code-o"></span></a></li>
    <li><a href="contact.php"><span class="sf sf-envelope-3-o"></span></a></li>
  </ul>
</aside>

Ответы [ 4 ]

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

Вы можете использовать что-то вроде этого: 

.nav li:not(:last-child){
  margin-bottom: 90px;
}

Я надеюсь, что это решит проблему.

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

   

 

.sidebar {
    background: #223556;
    width: 100px;
    align-items: center;
    display: flex;
    height: 200px;
    position: fixed;
    }
<div class="sidebar">
  <ul class="nav">
    <li><a href="index.php"><span class="sf sf-home-o">Home</span></a></li>
    <li><a href="about.php"><span class="sf sf-user-o">About</span></a></li>
    <li><a href="projects.php"><span class="sf sf-code-o">Projects</span></a></li>
    <li><a href="contact.php"><span class="sf sf-envelope-3-o">Contact</span></a></li>
  </ul>
</div>
0 голосов
/ 07 мая 2018

Элементы боковой панели не центрированы на вашем сайте, потому что вы используете нижнее поле для всех элементов.Вы не должны использовать его на последнем элементе.Вы можете использовать селектор :last-child и удалить bottom-margin.Смотрите этот снимок экрана

https://jsfiddle.net/a2cdkt92/3/

Я сделал это на вашем примере на скрипке, см. Ссылку выше.

Если вы добавите следующее к своему CSS на сайте, оно должно быть решено 

.nav li:last-child {
    margin-bottom: 0px;
}
0 голосов
/ 07 мая 2018

пожалуйста, проверьте ниже пример 

.sidebar{

  width: 100px;
  position: fixed;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 100%;
}
.sidebar .nav{
    background: #223556;
}
.table{
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 100%;
}
.table-cell{
  display: table-cell;
  vertical-align: middle;
}
<aside class="sidebar flex justify-center align-center">
    <div class="table">
      <div class="table-cell">
   
      <ul class="nav">
        <li><a href="index.php"><span class="sf sf-home-o"></span></a></li>
        <li><a href="about.php"><span class="sf sf-user-o"></span></a></li>
        <li><a href="projects.php"><span class="sf sf-code-o"></span></a></li>
        <li><a href="contact.php"><span class="sf sf-envelope-3-o"></span></a></li>
      </ul>

      </div>
    </div>
    </aside>
...