CODEWITHSUNDEEP
htmlcss
ryyst
ryyst

Reputation: 9799

vertical-align text in CSS

I have some really basic HTML & CSS:

header {
  vertical-align: middle;
  height: 60px;
  background-color: #00F;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" media="all" href="stylesheet.css">
  <title>Hello, World!</title>
</head>
<body>
  <header>
    Hello<sup>World</sup>
  </header>
</body>
</html>

But the text doesn't get aligned in the middle. Why not?

Upvotes: 42

Views: 87861

Answers (8)

clairesuzy
clairesuzy

Reputation: 27674

The vertical-align property only applies to:

inline-level and 'table-cell' elements

See this link.

You could use line-height to vertically center the text, just make it bigger than the actual font-size, however it is only effective if the text spans a single line.

Alternatively you could add padding to the top and bottom of the header element by equal values.

Edited as per comment: the obvious solution if using HTML5 header element would be to make it display: table-cell; instead of the default block which I think the reset CSS's apply.

Upvotes: 66

Zargold
Zargold

Reputation: 2092

Here's my favorite trick for vertical aligning things it uses flex box, everything should use flex box!

header {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    border: black solid 0.1rem;
    height: 200px; <!--Insert any height -->
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" media="all" href="stylesheet.css">
        <title>Hello, World!</title>
    </head>
    <body>
        <header>
            Hello<sup>World</sup>
        </header>
    </body>
</html>

Upvotes: 6

Zach Schneider
Zach Schneider

Reputation: 315

Flexbox can do this pretty easily now:

header {
     display: flex;
     align-items: center;
     justify-content: center;;
}

http://codepen.io/anon/pen/waYBjv

Upvotes: 25

Mahesh Cheliya
Mahesh Cheliya

Reputation: 1364

<div style="border:1px solid #000;height:200px;position: relative;">
     <div style="position: absolute;top: 50%;left:50%;">
     hello mahesh 
     </div>
</div>

Fiddle demo

Try this.

Upvotes: -1

Mahendra Liya
Mahendra Liya

Reputation: 13218

Try this, work very well for me:

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;

Upvotes: 11

brillout
brillout

Reputation: 7474

If you don't want to use a table you can use vertical-align:middle and display:inline-block while using an empty inline element with 100% height:

http://jsfiddle.net/ycugZ/

<!DOCTYPE><html><body> <!-- Author: brillout.com -->

<div style='height: 300px;border: 1px solid black;text-align:center'>
  <div class='i'>vertical-align + inline-block<br>trick<br>in action</div>
  <div class='i' style='height:100%;width:0px'></div>
</div>
<style> div.i{ display: inline-block; vertical-align: middle } </style>

</body></html>

Upvotes: 0

Marcel
Marcel

Reputation: 28097

vertical-align doesn't work the way you think it does in elements with display:block. People usually just use, for example, line-height:60px if the text is the only thing in the element and all stays on the same line.

If more stuff is going in there, it's probably better to give the container a height if you absolutely must and tweak the margin/padding/etc. of elements inside the containing element until it looks right.

Upvotes: 3

Saurabh Gokhale
Saurabh Gokhale

Reputation: 46425

The vertical-align attribute is for inline elements only. It will have no effect on block level elements, like a div or a paragraph.If you would like to vertically align an inline element to the middle just use this. 

vertical-align: middle;

Check out more here : Understanding vertical-align, or "How (Not) To Vertically Center Content"

Upvotes: 3

Related Questions