CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

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.

Synes godt om

krogstrup Nybegynder

19. oktober 2001 - 12:54 #1

- lytter med -

Har selv ofte haft samme problemstilling :-(

Synes godt om

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 :-)

Synes godt om

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>

Synes godt om

krogstrup Nybegynder

19. oktober 2001 - 14:49 #4

Har lige testet det på egen maskine...

Win2000 & IE 5.5

Virker IKKE !

Synes godt om

doeleman Nybegynder

20. oktober 2001 - 22:47 #5

Smider lidt ekstra point i puljen...

Synes godt om

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>.

Synes godt om

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>

Synes godt om

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.)

Synes godt om

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>

Synes godt om

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>

<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.

Synes godt om

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.

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51
Link fra form input Af jnrmgs i HTML	9	19/09/202319:10	23/09/202313:11
includere i HTML Af slein55 i HTML	3	15/09/202313:47	16/09/202309:40

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS