-2

I'm trying to vertical align some element without destroying the responsivness in a row here is my code :

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

Here is the expected output :

enter image description here

I'm using Bootstrap 3

I would also like to vertical align inside a navabar : 

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

executable
  • 3,365
  • 6
  • 24
  • 52

2 Answers2

0

use flex css property and set 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>
Nethra
  • 579
  • 2
  • 8
-1

If you use bootstrap, as in the example you can add to div class="align-items-center"

Anton Skybun
  • 1,479
  • 8
  • 21