How to vertically center a button and text inside a div

Question

I currently have a page like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Title</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <div class="page-header">
        <h3>HEADING</h3>
        <button class="btn btn-danger pull-right">Button</button>
      </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

I want the h3 and the button to be vertically aligned in the div, and I've tried setting style to vertical-align:middle but it doesn't work. What should I do?

EDIT: It seems my original question was unclear. I meant that I want the header text and button to appear on the same "line", but to be aligned vertically on that line. Right now, I can get them to be on the same line but the text and the button will be aligned by the top edge rather than the center.

Possible duplicate of [How to vertically center text with CSS?](http://stackoverflow.com/questions/8865458/how-to-vertically-center-text-with-css) — Manmeet S. Oberoi, May 05 '16 at 17:53

Michael Schwartz · Accepted Answer · 2016-05-06T02:09:39.227

Weave: http://kodeweave.sourceforge.net/editor/#0def3ea11664636810328b98a8780ed2

You didn't post your css so I don't know what you're working with. So here's a quick note:

NOTE: vertical-align only works for display: table-cell; and display: inline; elements (It also applies to ::first-letter and ::first-line).

Here's a simple solution using display: table; on the parent and display: table-cell; for what you want vertically centered.

If you want your button centered you have to remove the pull-right class, or you can add another class after it and then override it's css. (Simple solution, just remove the pull-right class.

Edit: So you want the button in the same line as your h3 tag right?

Well before I show you how to solve this remember that h1-h5 tags are all display: block; elements meaning they will always embed as a new line. (Like a paragraph <p> tag) So you need to tell the h3 tag to display either inline or inline-block.

Here is my revised weave: http://kodeweave.sourceforge.net/editor/#7b9839fb7971df2a27b7af895169ad8a

html, body {
  height: 100%;
}

.table {
  display: table;
  width: 100%;
  height: 100%;
}
  
.cell {
  display: table-cell;
  vertical-align: middle;
}

h3 {
  display: inline-block;
}

.btn {
  margin-top: 15px;
}

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css"/>

<div class="container table">
  <div class="page-header cell">
    <h3>HEADING</h3>
    <button class="btn btn-danger pull-right">Button</button>
  </div>
</div>

Can you please see my edit? Right now the text and button are being aligned by their top or bottom edge rather than being aligned in the center. — b_pcakes, May 05 '16 at 18:13
I have already tried adding `display: inline` to the `h3` tag, but my problem is that the `h3` tag and the `button` are being aligned by their top edge. I would like them to be aligned by their centers, regardless of their sizes. — b_pcakes, May 05 '16 at 19:03
Vertically centering is best achieves with display table and table-cell (as stated in answer). Another way is using flex. Because h1-h5 tags have a margin and the button is aside it. You would need to play with the margin property on what you want centered (as seen in answer). — Michael Schwartz, May 05 '16 at 21:22

Curtis Weeks · Answer 2 · 2016-05-05T17:59:11.117

You can verify the elements are vertically aligned by setting bootstraps default margins and paddings to 0px if needed.

    .container {
      white-space: nowrap;
      background: #eee;
    }

    .contener:before {
      content: '';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
      margin-right: -0.25em;
    }

    .page-header {
      display: inline-block;
      vertical-align: middle;
      width: 300px;
    }

https://jsfiddle.net/curtisweeks/md5qos66/

Explanation and source: https://css-tricks.com/centering-in-the-unknown/

score 0 · Answer 3 · answered May 05 '16 at 17:56

https://jsfiddle.net/dsupreme/m92e9dkr/

Make use of FlexBox

HTML code:

<div class="container">
  <div class="page-header">
    <div id="vertical"><h3>HEADING</h3>
      <button class="btn btn-danger pull-right">Button</button></div></div>
    </div>
  </div>
</div>

CSS code:

.container {
  width: 100%;
  text-align: center;
}
#vertical {
  width: 100%;
}

h3 {
  margin: 0;
  padding: 0;
}

.page-header {
  height: 200px;
  width: 100%;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

Can you please see my edit? Right now the text and button are being aligned by their top or bottom edge rather than being aligned in the center. — b_pcakes, May 05 '16 at 18:13

score -1 · Answer 4 · answered May 05 '16 at 17:30

-1

http://codepen.io/ruchiccio/pen/xVmJaG

<div class="container">
      <div class="page-header">
          <div id="vertical"><h3>HEADING</h3>
            <button class="btn btn-danger pull-right">Button</button></div></div>
      </div>

#vertical {
  position: absolute;
  top: 40%;
  width: 100%;
}

h3 {
  margin: 0;
  padding: 0;
}

.page-header {
  height: 200px;
  background-color: red;
  position: relative;
}

answered May 05 '16 at 17:30

Rachel S

3,780
3
24
37

As and when u add more components, you will have to change the Top(%) value. Not a scalable approach – Manmeet S. Oberoi May 05 '16 at 17:52

How to vertically center a button and text inside a div

4 Answers4