6 svar · 391 visningar · startad av l-boy
Har en div som ser ut så här:
#menu {
background-image: url(/upload/menu.jpg);
border-bottom: black 1px solid;
height:25px;
color:#FFFFFF;
}
När jag placerar text i den hamnar den högst upp till vänster, vilket är naturlig. Men jag lyckas inte fixa så att den hamnar i mitten, vertikalt då.
Hur gör jag?
text-align:center;
Ja, det funkar horisontellt. Men det var vertikalt jag var ute efter.
l-boy skrev:
Ja, det funkar horisontellt. Men det var vertikalt jag var ute efter.
Jag är absolut ingen CSS-expert. Men jag har för mig att bl.a. detta är något som W3C inte tycker att man ska pyssla med för att det är fult eller inte bra eller nåt. En riktig karl börjar med texten längst upp, typ.
Men om det är en enda rad, så labba lite med line-height som du sätter lika högt som divvens höjd, sen sätter du vertical-align:middle eller nåt.
Kan kanske bero på om du har texten i en p-tagg, en span-tagg också. Och vilken doctype definition du har.
Om det jävlas, kläm in en tabell med en enda cell, fixerad höjd och valign="middle" i td-taggen så är det klart på 30 sekunder.
Vad jag förstått det som så är det endast i tabeller man kan reglera vertical-align. Det går alltså inte enkelt att lösa i en div.
silfver skrev:
Vad jag förstått det som så är det endast i tabeller man kan reglera vertical-align. Det går alltså inte enkelt att lösa i en div.
Ja, celler (td).
Men också i span-taggar och liknande (p, h-taggarna) osv där man justerar var textens (eller inkluderade bilders) baslinje ska vara.
Har för mig jarvklo skrev om detta för nån månad sen. Jag tänkte jag skulle lägga det på minnet, men det gick ju naturligtvis inte..... :OO
Visst går det att centrera vertikalt i en div.
Lägg texten i en osynlig div.
Testa nu med att öka höjden på menu och du ser att den ändå ligger centrerat.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<style type=text/css>
#menu {background:silver; border-bottom: black 1px solid;
width:500px;height:25px;color:#FFFFFF;
}
.inne {position:relative;top:50%; font-size:12px; margin-top:-8px;}
</style>
</head>
<body>
<div id="menu">
<div class=inne>
Lite vertikalt centrerad text
</div>
</div>
</body>
</html>