Home » Html » CSS – vertical-align not working

CSS – vertical-align not working

Posted by: admin November 29, 2017 Leave a comment

Questions:

I got some really basic HTML & CSS:

Here’s the HTML:

<!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>

Here’s the CSS:

header {
    vertical-align: middle;
    height: 60px;
    background-color: #00F;
}

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

Answers:

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.

Questions:
Answers:

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;

Questions:
Answers:

Flexbox can do this pretty easily now:

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

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

Questions:
Answers:

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.

Questions:
Answers:

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”

Questions:
Answers:

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>

Questions:
Answers:

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>

Questions:
Answers:
<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.