导航垂直对齐固定在中间

Question

我想将导航垂直固定在右侧，并将其显示在中间的所有设备上。我创造了一个简单但不完美的工作。如何在所有设备中将导航固定在中间位置。现在它不适用于小屏幕。

<header class="header" id="nav">
    <ul class="nav nav-pills col-md-8 col-sm-12 col-xs-12" id="main-menu">
    <li class="active">
        <a href="#home">
            <h2>Home</h2> <i class="fa fa-circle"> </i>
        </a>
    </li>
    <li class="">
        <a href="#about">
            <h2>About</h2> <i class="fa fa-circle"></i>
        </a>
    </li>
</ul>
</header>

这是链接nav
在此先感谢

Answer 1

您可以在父div上使用以下代码：

 .vertical-middle {
    display: table-cell;
    float: none;
    vertical-align: middle;
  }

Answer 2

以百分比设置导航的宽度，以使其在不同的屏幕尺寸中保持响应，然后使用margin：auto来居中。

Answer 3

垂直居中是我经历中的巨大痛苦。 stackoverflow上有很多答案可以帮助你获得恰到好处的css。

就我个人而言，我发现How To Center In CSS是一个很棒的代码生成器，可以在任何时候处理我的麻烦。这至少应该帮助您垂直对齐，这样您就可以更轻松地完成其他样式。