如何垂直对齐元素

Question

我正在尝试垂直对齐某些元素，而不会连续破坏响应性，这是我的代码：

#navbar{
    height: 80px;
    border: 1px solid red;
}

#logo{
    width: 40px;
    height: auto;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div id="navbar" class="row">
    <div class="col-xs-4">
        <img id="logo" src="http://s.cdpn.io/3/kiwi.svg" alt="Logo">
    </div>
    <div class="col-xs-6">
        <a href="#">TEXT</a>
        <a href="#">TEXT</a>
        <a href="#">TEXT</a>
        <a href="#">TEXT</a>
    </div>
    <div class="col-xs-2">TEXT RIGHT</div>
</div>

这是预期的输出：

我正在使用Bootstrap 3

我也想在导航栏内垂直对齐

.navbar-header{
    height: 80px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>

    <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav">
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
        </ul>
    </div>
</nav>

https://jsfiddle.net/gmrketzs/

Answer 1

使用<template> <slot @event="doThis"/> </template> css属性并设置flex

align-items:center

#navbar{
    height: 80px;
    border: 1px solid red;
    display:flex;
    align-items: center;
}

#logo{
    width: 40px;
    height: auto;
}

Answer 2

如果使用引导程序（如示例中所示），则可以将其添加到div class="align-items-center"