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
Post a Comment