如何垂直对齐一行中的元素[重复]答案

【问题标题】：How to vertical align element in a row [duplicate]如何垂直对齐一行中的元素[重复]
【发布时间】：2020-01-10 22:00:11
【问题描述】：

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

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

【问题讨论】：

标签： html css twitter-bootstrap-3

【解决方案1】：

使用flex css 属性并设置align-items:center

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

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

【讨论】：

【解决方案2】：

如果您使用引导程序，如示例中您可以添加到 div class="align-items-center"

【讨论】：