You can use display: table. See your example modified: http://jsfiddle.net/cArg7/

h4{padding:0px;Margin:5px;} #homenav { font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; background: #e8edff; color: #669; text-align:center; vertical-align: middle; border-radius: 5px; padding: 2px; width:auto; display: table; } #homenav:hover { background:#D0DAFD; color:#333399; } 

You can use display: table. See your example modified: http://jsfiddle.net/cArg7/1/

h4{padding:0px;Margin:5px;} #homenav { font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; background: #e8edff; color: #669; text-align:center; vertical-align: middle; border-radius: 5px; padding: 2px; width:auto; display: table; } #homenav:hover { background:#D0DAFD; color:#333399; } 

And simplify the html code, merge <a> and <div> tags:

<a href='./HH.html' id='homenav'> <h4> HH </h4> </a>