html - 垂直对齐在 Bootstrap 中不起作用

Question

我试图将标题的菜单链接垂直居中，但不起作用。我正在使用 Bootstrap。

HTML

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 header">
            <div class="row">
                <div class="col-xs-1"></div>
                <div class="col-xs-2" style="font-size: 40px;">
                    <p>Capelli</p>
                </div>
                <div class="col-xs-3"></div>
                <div class="col-xs-6">
                    <ul class="list-group list-inline">
                        <li>Vestidos</li>
                        <li>Meus Pedidos</li>
                        <li></li>
                        <li></li>
                        <li>Login</li>
                        <li>Cadastro</li>
                        <li></li>
                        <li></li>
                        <li>Carrinho</li>
                    </ul>
                </div>
                <div class="col-xs-1"></div>
            </div>
        </div>
    </div>
</div>

CSS

body {
    background-color: #CFCFCF;
}

.header {
    min-height: 3.7em;
    color: #FFFFFF;
    background-color: #002A43;
    font-family: Arial, sans-serif;
    font-size: 20px;
}

.vertical {
    float: none;
    display: inline-block;
    vertical-align: middle;
}

当运行代码时，没有任何反应。

我尝试了很多方法，比如直接在行或列中使用该类，但没有任何效果。我也尝试了不同的垂直对齐方法，但没有用。

P.S.:抱歉我的英语不好。

Answer 1

您想创建导航栏菜单吗？

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Capelli</a>
    </div>
    <div>
      <ul class="nav navbar-nav push-right">
        <li class="active"><a href="#">Vestidos</a></li>
        <li><a href="#"> etc</a></li>
        <li><a href="#">etc</a></li>
        <li><a href="#">etc</a></li>
      </ul>
    </div>
  </div>
</nav>

在 css 中你应该定义 X 像素的字体大小，因为你使用的是相对字体大小。

10px 或 20px 的 3.7em。根据浏览器的不同，该值可能会发生变化。

 html{ font-size: 16px;}
.header{font-size: 1.25em; // 20/16 = 1.25 and you have sure the font size is relative to 16 because you have define html font size to 16px;.