How to center navbar elements vertically (Twitter Bootstrap)?
The .brand
class uses a different line-height
than the base text that is used throughout Bootstrap, as well as a few other key differences.
Relevant parts from the original bootstrap navbar LESS -
For .brand
:
.brand {
// Vertically center the text given $navbarHeight
@elementHeight: 20px;
padding: ((@navbarHeight - @elementHeight) / 2 - 2) 20px ((@navbarHeight - @elementHeight) / 2 + 2);
font-size: 20px;
line-height: 1;
}
For links in the navbar:
.navbar .nav > li > a {
@elementHeight: 20px;
padding: ((@navbarHeight - @elementHeight) / 2 - 1) 10px ((@navbarHeight - @elementHeight) / 2 + 1);
line-height: 19px;
}
You'll probably need to play around with the values of @elementHeight
, line-height
, and maybe padding
for the .navbar .nav > li > a
selector to reflect the bigger 60px @navbarHeight
(these default values are meant for a 40px @navbarHeight
). Maybe try a 40px @elementHeight
and/or a 29px line-height to start.
Bootstrap 3 : Vertically Center Navigation Links when Logo Increasing The Height of Navbar
add this to your stylesheet. line-height should match the height of your logo
.navbar-nav li a {
line-height: 50px;
}
Check out the fiddle at: http://jsfiddle.net/nD4tW/
Vertically centering nav items in Bootstrap 3
Vertical alignment can be done in a number of ways, as shown in this Stack Overflow question. However, they're fairly situational, meaning there isn't a single approach that can be applied to every case.
For the issue you're facing, I'd suggest the line-height
approach, since all of your navigation content is on a single line. Just remove any vertical padding on the elements in questions, and set them to have the same line-height
as the desired container height (80px):
.navbar-nav li a {
padding:0 15px;
line-height:80px;
}
.navbar-header a {
padding:0 15px;
line-height:80px;
}
Here's a Bootply to demonstrate. Hope this helps! Let me know if you have any questions.
Alternatively, you can use:
.navbar.isModified a {
padding:0 15px;
line-height:80px;
}
Though you may find this too broad of a CSS selector if you plan on styling other links in your navbar differently.
Note: If you want the mobile version of the menu to look alright, you may need to use media queries to override these styles with more of your own.
Bootstrap 4 : Vertically Align Navigation Links when Logo Increases the Navbar Height
I think you can remove top and bottom padding from links and add height and line-height to it. Also remove padding from .navbar-brand
.
Just add this CSS:
.navbar-brand {
padding: 0;
}
.navbar-nav .nav-link {
padding-top: 0;
padding-bottom: 0;
height: 50px;
line-height: 50px;
}
CODEPEN
Centering Bootstrap navbar horizontally and vertically
If you want to center the links you need to apply those rules to the .navbar-nav
and li
classes (most likely you'll want these inside a media-query as well).
Centered Links CSS
@media (min-width: 768px) {
.navbar.navbar-default .navbar-nav {
width: 100%;
text-align: center;
}
.navbar.navbar-default .navbar-nav > li {
display: inline-block;
float: none
}
}
And you can use line-height
to adjust the height of your links so they're vertically aligned.
Vertical Link Alignment
@media (min-width: 768px) {
.navbar.navbar-default .navbar-nav > li > a {
line-height: 4;
}
}
Working Example:
.navbar.navbar-default { background: white; border: 1px solid transparent}.navbar.navbar-default .navbar-nav.navbar-center > li > a,.navbar.navbar-default .navbar-search > li > a { color: #266080;}@media (max-width: 767px) { .navbar.navbar-default { padding: 15px 0; } .navbar.navbar-default .navbar-collapse { margin-top: 15px; margin-bottom: -15px; border: 0; box-shadow: none; }}@media (min-width: 768px) { .navbar.navbar-default {} .navbar.navbar-default .navbar-nav.navbar-center { width: 100%; text-align: center; } .navbar.navbar-default .navbar-nav.navbar-center > li { display: inline-block; float: none } .navbar.navbar-default .navbar-nav.navbar-center > li > a { line-height: 4; text-transform: uppercase; font-size: 14px; font-weight: bold; } .navbar.navbar-default .navbar-search { position: absolute; right: 2%; top: 17px; line-height: 4; font-size: 20px; }}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"><nav class="navbar navbar-default navbar-static-top"> <div class="container-fluid">
<div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav" aria-expanded="false"> <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" id="nav"> <ul class="nav navbar-nav navbar-center"> <li class="active"><a href="#home">Home</a> </li> <li><a href="#portfolio">Portfolio</a> </li> <li><a href="#blog">Blog</a> </li> <li><a href="#pages">Pages</a> </li> <li><a href="#features">Features</a> </li> <li><a href="#mega-menu">Mega menu</a> </li> <li><a href="#contact">Contact</a> </li> </ul> <ul class="nav navbar-nav navbar-right navbar-search"> <li><a href="#"><span class="glyphicon glyphicon-search"></span> </a> </li> </ul> </div>
</div></nav><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Vertical Align Center in Bootstrap 4
Important! Vertical center is relative to the height of the parent
If the parent of the element you're trying to center has no defined
height, none of the vertical centering solutions will work!
Now, onto vertical centering...
Bootstrap 5 (Updated 2021)
Bootstrap 5 is still flexbox based so vertical centering works the same way as Bootstrap 4. For example, align-items-center
, justify-content-center
or auto margins can used on the flexbox parent (row
or d-flex
).
- use
align-items-center
on a flexbox row parent (row
ord-flex
) - use
justify-content-center
on a flexbox column parent (d-flex flex-column
) - use
my-auto
on a flexbox parent
Vertical Center in Bootstrap 5
Bootstrap 4
You can use the new flexbox & size utilities to make the container
full-height and display: flex
. These options don't require extra CSS (except that the height of the container (ie:html,body) must be 100%).
Option 1 align-self-center
on flexbox child
<div class="container d-flex h-100">
<div class="row justify-content-center align-self-center">
I'm vertically centered
</div>
</div>
https://codeply.com/go/fFqaDe5Oey
Option 2 align-items-center
on flexbox parent (.row
is display:flex; flex-direction:row
)
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-6 mx-auto">
<div class="jumbotron">
I'm vertically centered
</div>
</div>
</div>
</div>
https://codeply.com/go/BumdFnmLuk
Option 3 justify-content-center
on flexbox parent (.card
is display:flex;flex-direction:column
)
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-6 mx-auto">
<div class="card h-100 border-primary justify-content-center">
<div>
...card content...
</div>
</div>
</div>
</div>
</div>
https://codeply.com/go/3gySSEe7nd
More on Bootstrap 4 Vertical Centering
Now that Bootstrap 4 offers flexbox and other utilities, there are many approaches to vertical
alignment. http://www.codeply.com/go/WG15ZWC4lf
1 - Vertical Center Using Auto Margins:
Another way to vertically center is to use my-auto
. This will center the element within it's container. For example, h-100
makes the row full height, and my-auto
will vertically center the col-sm-12
column.
<div class="row h-100">
<div class="col-sm-12 my-auto">
<div class="card card-block w-25">Card</div>
</div>
</div>
Vertical Center Using Auto Margins Demo
my-auto
represents margins on the vertical y-axis and is equivalent to:
margin-top: auto;
margin-bottom: auto;
2 - Vertical Center with Flexbox:
Since Bootstrap 4 .row
is now display:flex
you can simply use align-self-center
on any column to vertically center it...
<div class="row">
<div class="col-6 align-self-center">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
or, use align-items-center
on the entire .row
to vertically center align all col-*
in the row...
<div class="row align-items-center">
<div class="col-6">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
Vertical Center Different Height Columns Demo
See this Q/A to center, but maintain equal height
3 - Vertical Center Using Display Utils:
Bootstrap 4 has display utils that can be used for display:table
, display:table-cell
, display:inline
, etc.. These can be used with the vertical alignment utils to align inline, inline-block or table cell elements.
<div class="row h-50">
<div class="col-sm-12 h-100 d-table">
<div class="card card-block d-table-cell align-middle">
I am centered vertically
</div>
</div>
</div>
Vertical Center Using Display Utils Demo
More examples
Vertical center image in <div>
Vertical center .row in .container
Vertical center and bottom in <div>
Vertical center child inside parent
Vertical center full screen jumbotron
Important! Did I mention height?
Remember vertical centering is relative to the height of the parent element. If you want to center on the entire page, in most cases, this should be your CSS...
body,html {
height: 100%;
}
Or use min-height: 100vh
(min-vh-100
in Bootstrap 4.1+) on the parent/container. If you want to center a child element inside the parent. The parent must have a defined height.
Also see:
Vertical alignment in bootstrap 4
Bootstrap Center Vertical and Horizontal Alignment
Vertical align logo inside .navbar-brand with Bootstrap 3
You could add some custom style and set display: flex
and align-items: center
on navbar-brand
element.
.navbar-brand { display: flex; align-items: center;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /><nav class="navbar navbar-fixed-top navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"> Company Name <img src="http://via.placeholder.com/220x36"> </a> </div> </div></nav>
Bootstrap navbar - align button vertically
Give your button.navbar-btn
class a margin-top
of 25px
and you are good to go.
button.navbar-btn{
margin-top:25px
}
Check fiddle: https://jsfiddle.net/4ku2jhm4/1/
Related Topics
Add Dropshadow Only to Border of Grid Pane Javafx 2.2
Angular2: How to Manually Add CSS Files by Condition to Index.Html
Viewport Units, Keeping Aspect Ratio
Sass @Extend Base/Default Without Also Extending Pseudo-Classes
Vertically Aligning a Checkbox
Angular Material 2 Table Header Center Alignment
Text-Overflow: Ellipsis Doesn't Appear to Be Working
Twitter Bootstrap - Full Width Navbar
Add Syntax Highlighting to .Less-Files in Netbeans
Ember.Js Router: How to Animate State Transitions
CSS Hover on a Div, But Not If Hover on His Children
Jsf Panelgrid Alignment to Top
How to Get Material-Ui Drawer to 'Squeeze' Other Content When Open
Compressing Fonts for Using in Web