Avatar billede doeleman Nybegynder
19. oktober 2001 - 12:51 Der er 10 kommentarer og
1 løsning

Centrere tekst vertikalt med CSS

Hvordan centrerer man tekst vertikalt vha. CSS?

Jeg har lavet et lille eksempel med tabeller, som jeg ønsker at
konvertere til CSS.

<html>
<head>
<title>DIV test</title>

<style type=\"text/css\">
table, div { height: 100px; width: 100px; border: solid 1px
black; }
div { position: absolute; top: 150px }
</style>

</head>
<body>

<table>
<tr>
<td valign=\"middle\"><p>Tekst Tekst Tekst</p></td>
</tr>
</table>


<div><p style=\"vertical-align: middle\">Tekst Tekst
Tekst</p></div>

</body>
</html>


vertical-align centrere tilsyneladende kun inden for <p>-tagget,
men jeg vil gerne have teksten centreret i <div>-tagget.
Avatar billede krogstrup Nybegynder
19. oktober 2001 - 12:54 #1
- lytter med -

Har selv ofte haft samme problemstilling :-(
Avatar billede ahlforn Nybegynder
19. oktober 2001 - 13:16 #2
giv <div> tagget en id...her id=div1. Så bliver indstillinger indenfor det unikke ID tildelt til div1.

#div1
{
VERTICAL-ALIGN: middle;
}

Det virker...jeg bruger det selv :-)
Avatar billede doeleman Nybegynder
19. oktober 2001 - 14:41 #3
Jeg har nu prøvet følgende. Det virker tilsyneladende heller ikke.

<html>
<head>
<title>DIV test</title>

<style type=\"text/css\">
table, div { height: 100px; width: 100px; border: solid 1px black; }
div { position: absolute; top: 150px }
#div1 { vertical-align: middle }
</style>

</head>
<body>

<div id=\"div1\"><p>Tekst Tekst Tekst</p></div>

</body>
</html>
Avatar billede krogstrup Nybegynder
19. oktober 2001 - 14:49 #4
Har lige testet det på egen maskine...

Win2000 & IE 5.5

Virker IKKE !
Avatar billede doeleman Nybegynder
20. oktober 2001 - 22:47 #5
Smider lidt ekstra point i puljen...
Avatar billede callesen Praktikant
21. oktober 2001 - 07:07 #6
vertical-align sætter en tekst i forhold til sin egen \'tekstlinie\', altså en udvidelse af html-taggene <sup> og <sub>. Hvis du vil centrere vertikalt i en \'boks\' kan du fx. bruge:
    padding-top: 50%;
    padding-bottom: 50%;

i din .div klasse som du kalder med <div>, #div klassen kalder du med <span>.
Avatar billede doeleman Nybegynder
21. oktober 2001 - 10:04 #7
Tak Callesen,
Jeg fik følgende til at virke...

<html>
<head>
  <title>DIV tekst</title>
  <style type=\"text/css\">
  div { height: 200px; width: 200px; border: solid 1px black }
  </style>
</head>

<body>

<div style=\"padding-top: 50%; padding-bottom: 50%\"><span>tekst</span></div>

</body>
</html>
Avatar billede callesen Praktikant
21. oktober 2001 - 10:35 #8
Tak for point. Det er ikke en så god ide - selv om det virker - at \'style\' div globalt. Det ville være bedre:
<head>
  <title>DIV tekst</title>
  <style type=\"text/css\">
  .kasse { height: 200px; width: 200px; border: solid 1px black }
  </style>
</head>

<body>

<div CLASS=\"kasse\" style=\"padding-top: 50%; padding-bottom: 50%\">tekst</div>

</body>
</html>
Dit span-tag er overflødigt.
(dette er ikke for at være \'skolemester\' - du ved det måske og bruger det som et eksempel; men for at yde lidt mere for de mange point.)
Avatar billede doeleman Nybegynder
21. oktober 2001 - 11:39 #9
Tak for tips\'ne.

Tilsyneladende er der dog stadig problemer. Hvad sker der, hvis højden på boksen, ændres til f.eks. 40px, eller 400px. Det ser ud til, at det var tilfældigt, at det virkede før.

<html>
<head>
  <title>DIV tekst</title>
  <style type=\"text/css\">
  .kasse { height: 40px; width: 200px; border: solid 1px black }
  </style>
</head>

<body>

<div CLASS=\"kasse\" style=\"padding-top:50%; padding-bottom:50%\">tekst</div>

</body>
</html>
Avatar billede callesen Praktikant
21. oktober 2001 - 13:14 #10
Undskyld jeg svarer lidt sent; men hvis jeg ikke havde grå hår, så....
Problemet opstår måske ved at blande absolute og relative værdier (det virker med alle værdier i %) - jeg kan få det til at virke med begge slags værdier ved at sætte en boks i boksen:
<head>
<!-- Minus AutoDato -->
  <title>DIV tekst</title>
  <style type=\"text/css\">
  .kasse {
position:absolute;
height: 400px;
width: 150px;
border: solid 1px black;
padding-top:50%;
padding-bottom:50%;
top:10px;
left:10px;
  }
  .text {
position:relative;
height: 40%;
width: 100%;
border: solid 0px black;
padding-top:50%;
padding-bottom:50%;
padding-left:50%;
padding-right:50%;
  }
  </style>
</head>

<body>

<div CLASS=\"kasse\"><div CLASS=\"text\">tekst</div></div>

</body>
</html>

Håber du ka\' bruge det.
Avatar billede doeleman Nybegynder
21. oktober 2001 - 16:18 #11
Hmm, virker tilsyneladende stadigvæk ikke...
Hvad sker der, hvis du ændrer højden på .kasse til 100px? Ingenting.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester