html - vertical-align doesn't center the text -
i have following css:
#header-notification { color: #7b6f60; font-size: 13px; font-weight: bold; float: left; text-align: center; vertical-align: middle; height: 20px; width: 20px; background-color: #e5e5e5; }
and declared label as:
<label id="header-notification"></label>
however doing gives me following:
as can see text here not vertically centered. doing wrong?
as using single character align vertically, can use line-height
property here vertically align in middle of element
#header-notification { color: #7b6f60; font-size: 13px; font-weight: bold; float: left; text-align: center; vertical-align: middle; height: 20px; width: 20px; background-color: #e5e5e5; line-height: 20px; }
for making vertical-align: middle;
work, need use display: table-cell;
align middle vertically.. won't need here specified trying align single character. display: table-cell;
method used when want align entire paragraph or image vertically inside element.
Comments
Post a Comment