Simon Zhu Simon Zhu - 1 year ago 88
HTML Question

How to vertically center a button and text inside a div

I currently have a page like this:

<!DOCTYPE html>
<html lang="en">
<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 -->

<!-- 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=""></script>
<script src=""></script>
<div class="container">
<div class="page-header">
<button class="btn btn-danger pull-right">Button</button>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src=""></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>

I want the
and the
to be vertically aligned in the
, and I've tried setting style to
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.

Answer Source


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:

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=""></script>
<script src=""></script>
<link rel="stylesheet" href=""/>

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download