html - Unable to vertically align text inside container -


i'm trying vertically align text in couple of containers using line-height, won't work. have never had problems before, reason won't line now.

now, i'm blind coding, can't seem find problem lies...

this how html looks like:

<div class="formlabel"> <div class="labelnumber">d</div> <div class="labeltitle"> <h2>new password</h2> <p>check character , length restrictions</p> </div> </div> 

and how css looks like:

.formlabel { position: relative; width: 400px; height: 40px; padding: 20px 0px 0px 10px; margin: 0; } .labelnumber { float: left; width: 30px; height: 30px; line-height: 30px; background: #191919; font: bold 18px arial; color: #555555; text-align: center; padding: 0; margin: 0; } 

it's character in .labelnumber container i'm trying vertically align.

the line-height attribute part of shorthand font syntax, put line-height after or integrate font attribute.

.labelnumber { float: left; width: 30px; height: 30px; background: #191919; font: bold 18px/30px arial; /** font-size / line-height */ color: #fff; text-align: center; padding: 0; margin: 0; } 

basically font attribute overwriting line-height.


Comments

Popular posts from this blog

javascript - backbone.js Collection.add() doesn't `construct` (`initialize`) an object -

php - Get uncommon values from two or more arrays -

Adding duplicate array rows in Php -