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:

enter image description here

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

demo

#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

Popular posts from this blog

curl - PHP fsockopen help required -

HTTP/1.0 407 Proxy Authentication Required PHP -

c# - Resource not found error -