Ho questa pagina html:
a cui viene applicata questo foglio di stile:codice:<html> <head> <link rel="stylesheet" type="text/css" href="css/theartofweb.css"> </head> <body> <div id="wrap"> <div id="menu"> Home | Webdesign | Contact | Links </div> ciao </div> </body> </html>
come faccio ad allineare gli elementi verticalmente in middle?codice:body { margin: 0; padding: 0; font-family: Verdana, sans-serif; font-size: small; line-height: 1.5em; } #wrap { position: relative; margin: 0 auto; padding: 0; width: 745px; background: #fff; } #menu { border: 1px solid red; background: url(../img/menu.gif) repeat top left; height:23px; padding: 0; margin: 0; text-align: left; font: 8pt/8pt verdana, helvetica, sans-serif; color: #ccc; } #menu a { font: 10px verdana, helvetica, sans-serif; font-weight: bold; color: #FFFFFF; text-decoration: none } #menu a:hover { color: #EB9F3D; text-decoration: underline }
ho provato aggiungentdo: vertical-align: middle; ma non funge.
se metto il padding di #menu a: padding: 5px 0px 5px 0px; il testo viene centrato ma il box non è più alto 23px ma di più (quindi l'immagine in background si ripete verso il basso..btw:come lo evito?)
avete qualche dritta al riguardo?
(l'immagine della background la potete trovare quà: http://www.theartofweb.altervista.or...e/img/menu.gif)
Rispondi quotando
