Question

我正在尝试制作一个粘性侧边栏，其中导航都是垂直和水平居中。这对于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>

Answer 1

请查看以下示例

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

＆＃13;

   

 

.sidebar {
    background: #223556;
    width: 100px;
    align-items: center;
    display: flex;
    height: 200px;
    position: fixed;
    }

＆＃13;

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

＆＃13;

Answer 3

侧边栏项目不会在您的网站上居中，因为您在所有元素上使用了边距底部。你不应该在最后一个元素上使用它。您可以使用:last-child选择器并移除bottom-margin。见screenshot

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

我已经在你的小提琴例子上看到了上面的链接。

如果您将以下内容添加到网站的CSS中，则应该解决

.nav li:last-child {
    margin-bottom: 0px;
}

Answer 4

您可以使用以下内容：

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

我希望这能解决这个问题。

垂直和水平居中的粘性侧边栏与flexbox

4 个答案: