Vertical align center not working inside Bootstrap container

Question

This is my jsfiddle: https://jsfiddle.net/DTcHh/39748/

I want the text Hello World to be centered vertical but somehow it is not working. How do I fix this problem?

This is my CSS:

.app-header{
  height: 50px;
  background: #000;
  color: #fff;
}
.v-center{
  vertical-align:middle;
}

See https://stackoverflow.com/questions/7967217/vertical-align-middle-doesnt-work. You must wrap your element in a table-cell, within a table using display. — Meezaan-ud-Din, Nov 27 '17 at 11:18
May this be of assistance: https://jsfiddle.net/DTcHh/39749/ Let me know if you have questions. — Adriano, Nov 27 '17 at 11:20

score 2 · Answer 1 · answered Nov 27 '17 at 11:20

Set line-height to the div height.

/* Latest compiled and minified CSS included as External Resource*/


/* Optional theme */

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.app-header {
  height: 50px;
  background: #000;
  color: #fff;
}

.v-center {
  text-align: center;
  vertical-align: middle;
  line-height: 50px; /* .app-header div height */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="app-header">
  <div class="container clearfix">
    <div class="pull-right v-center">
      Hello World
    </div>
  </div>

</div>

Alessio · Answer 2 · 2017-11-27T11:26:24.173

1

Just set a line-height as the same height of the header:

.v-center{
  vertical-align:middle;
  line-height: 50px;
}

This way you can keep on using bootstrap framework classes without introducing flexbox or absolute positioning.

Updated codepen here: https://codepen.io/alezuc/pen/MOqWwP

edited Nov 27 '17 at 11:26

answered Nov 27 '17 at 11:20

Alessio

3,404
19
35
48

if you set the line-height, you don;t need the `vertical-align:middle` style – Mihai T Nov 27 '17 at 11:23
@MihaiT thanks for the hint! I've updated the codepen! – Alessio Nov 27 '17 at 11:27

Mihai T · Accepted Answer · 2017-11-27T11:47:28.080

YOu can do this with many different ways.

One way is to use display:flex; together with align-items:center.

See below

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

.app-header{
  height: 50px;
  background: #000;
  color: #fff;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
}
.container {
  width:100%;
}
.v-center{
  
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="app-header">
  <div class="container clearfix">
    <div class="pull-right v-center">
      Hello World
    </div>
  </div>
  
</div>

That would be a responsive solution meaning that no matter the height of the header, the text will be vertically aligned in the center of it.

Another solution would be to set the line-height of the v-center equal to your header height, in your case .v-center { line-height:50px}

score 1 · Answer 4 · answered Nov 27 '17 at 11:22

Give line-height:50px; to .v-center class.

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

.app-header{
  height: 50px;
  background: #000;
  color: #fff;
}
.v-center{
  vertical-align:middle;
  line-height:50px;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="app-header">
  <div class="container clearfix">
    <div class="pull-right v-center">
      Hello World
    </div>
  </div>
  
</div>

Vertical align center not working inside Bootstrap container

4 Answers4