CSS: elemek függőlegesen középre
Előzőleg már feldobtam egy témát, de arra értékelhető választ sajnos nem kaptam. Így egy kicsit a magam fejem után mentem és átvariáltam a dolgot. A probléma immár más jellegű: A elemben középre kellene igazítani a szöveget függőlegesen, hogy teljes legyen a hasonlóság. Ez azonban a vertical-align-nal nem megy, mivel az table és inline elemekre vonatkozik block-ra nem. Van megoldás? Előre is kösz! A kód:
#ujmenu
{
display: block
width: 180px;
height: 20px;
background: #666666;
padding: 0px 0px;
}
#ujmenu A
{
display: block;
width: 179px;
height: 20px;
background: url('menubut.gif') #666666 no-repeat left;
font-family: Arial, Helvetica, Sans serif;
font-size: 13px;
font-weight: normal;
color: #FFFFFF;
text-align: left;
text-decioration: none;
}
#ujmenu A:hover
{
height: 20px;
background: url('menubut.gif') #CCCCCC no-repeat left;
color: #000000;
}
...
<div id="ujmenu"><a href="#">Link</a>
■ #ujmenu
{
display: block
width: 180px;
height: 20px;
background: #666666;
padding: 0px 0px;
}
#ujmenu A
{
display: block;
width: 179px;
height: 20px;
background: url('menubut.gif') #666666 no-repeat left;
font-family: Arial, Helvetica, Sans serif;
font-size: 13px;
font-weight: normal;
color: #FFFFFF;
text-align: left;
text-decioration: none;
}
#ujmenu A:hover
{
height: 20px;
background: url('menubut.gif') #CCCCCC no-repeat left;
color: #000000;
}
...
<div id="ujmenu"><a href="#">Link</a>
Abszolút
line-height
kiegészítés (személyes tapasztalat): ie és ff egészen máshogy kerekít, ezért néha 1 pixel eltérés mutatkozhat a két böngészőben, ilyenkor egy pixellel kevesebbet vagy többet adj meg line-height-nek. ha többet adsz meg, akkor viszont ne feledkezz meg az overflow: hiddenről, különben széttolja a magasságot is.
gex
Köszi!
És ha mindig más a sorok száma?
Hogy tudom elérni, hogy függőlegesen mindig középen legyen a szöveg egy divben/spanben, függetlenül attól hogy 1,2,3 sorban van?
Létezik a margin: auto; de ezt eddig nem sikerült működésre bírnom.
Köszi!
blogmark