Simon Zhu Simon Zhu - 7 months ago 26
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">
<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.

Answer

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>

Comments