vertical aligning

Shows two ways of vertical aligning: display table and line-height

by mirontoli

HTML

<div id="outer">hej</div>
<br><br>
<div id="tbl">hej</div>

CSS

#outer {
    height: 30px;
    width:300px;
    line-height: 30px;
    background-color:blue;
    color:white;
    text-align: center;
}
#tbl {
    height: 30px;
    width: 300px;
    background-color:blue;
    color:white;
    display:table-cell;
    padding: 0 5px 0 5px;
    vertical-align:middle;
    text-align:center;
}