Avatar billede triple-x Nybegynder
02. april 2005 - 18:23 Der er 11 kommentarer og
1 løsning

vertical align

Hey eksperter,

Jeg forstår ikke helt vertical align, hvorfor virker dette simple lille stykke kode ik?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style>
#test {
height:200px;
vertical-align:center;
}
</style>

</head>

<body>
<div id="test">blabla</div>
</body>
</html>


den skulle gerne centrere teksten vertikalt men det virker desværre ikke.
Avatar billede roenving Novice
02. april 2005 - 18:29 #1
Næh, vertical-align virker kun på tabel-celler ...

-- og følgende virker faktisk i Mozilla, men IE understøtter vist ikke tabel-formaterne i css:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style>
#test {
height:200px;
vertical-align:middle;
display:table-cell;
border:1px solid red;
}
</style>

</head>

<body>
<div id="test">blabla</div>
</body>
</html>

-- forresten er det vel middle, du skal bruge, selvom det ikke hjælper det fjerneste i f.eks. IE !-)
Avatar billede triple-x Nybegynder
02. april 2005 - 18:31 #2
vil det sige at det faktisk ikke er muligt at centrer en tekst vertikalt i et div?

Hmm det var dog irriterende.

jeg tester lige dit forsøg
Avatar billede triple-x Nybegynder
02. april 2005 - 18:32 #3
og som du korrekt sagde så virker dit forsøg ikke i IE, det var da godt nok trist.

Findes der alternative løsninger uden at skulle til at bytte mig af tables?
Avatar billede roenving Novice
02. april 2005 - 18:32 #4
http://blooberry.com/indexdot/css/properties/position/vertalign.htm

-- og det ser ud til, at det er inline-elementer og tabel-celler, det virker på ...
Avatar billede triple-x Nybegynder
02. april 2005 - 18:37 #5
er slet ikke ekspert på området :) så jeg bliver nød til at ha lidt mere forklaring Roenving
Avatar billede roenving Novice
02. april 2005 - 18:39 #6
Hvis du kigger på linket, kan du under Quick statistics se:

Default Value:
baseline
Applicable Elements: //Elementer, det virker på
Inline and 'table-cell' elements
Inherit From Parent:
No
Applicable Media:
Visual
HTML Equivalent: //Skulle man skrive noget tilsvarende i html, ville det være:
<applet|iframe|img|input|object|spacer ALIGN>,
<caption|col|colgroup|tbody|tfoot|thead|th|td|tr VALIGN>
Avatar billede triple-x Nybegynder
02. april 2005 - 18:44 #7
Roenving, jeg er lidt i tvivl om hvad jeg får ud af det. Som jeg læser det er den eneste måde at lave det om til tables, er det korrekt forstået?
Avatar billede roenving Novice
02. april 2005 - 18:46 #8
Ja !-)

-- eller lave noget med at javascripte dig til nogle højder, og så sætte offset efter det !o]
Avatar billede triple-x Nybegynder
02. april 2005 - 18:48 #9
hehe det er der jo ingen grund til at komme ud i. Jeg skiftede om til css fordi så mange efterhånden begynder at sige det er det bedste at gøre og det mest rigtige og sådan. Men hjælper jo ik skide meget når IE ik kan følge med og ik kan vise siden ordenlig så.

Smid et svar Roenving, tusind tak for hjælpen
Avatar billede roenving Novice
02. april 2005 - 19:02 #10
Der er nu ikke noget galt med tabeller fordi man bruger css, de har det glimrende sammen !-)

-- noget andet er så gamle dages tabelhelveder, hvor 7000 tabeller var nestet inde i hinanden, og 7 mio. spacer.gifs var brugt til at skubbe til det ene og det andet, fordi man i de ældste former for html ikke havde layout-muligheder overhovedet ...

-- men der er altså et par web-designere/-programmører, som ikke lige har forstået, hvad det går ud på, og som ideligt præker, at man ikke _må_ bruge tabeller, ganske på trods af, at w3c, som vedligeholder html-standarden, direkte anbefaler den slags til forskellige tasks, som kun fornuftigt kan løses på den måde ...

F.eks. omkring det spørgsmål, du selv stiller, for i anbefalinger, som tager udgangspunkt i den oprindelige css-standard, er vertikalt centrering altså kun mulig i tabel-celler, i css2 kan man med display:table-cell; indstille elementer til at opføre sig på den måde !-)

-- men css2 har M$ valgt næsten ikke at understøtte, og så må man direkte bruge tabeller, hvis også den browser skal understøttes ...

-- en anden task, som kun fornuftigt kan løses med tabeller, hvis man vil undgå at bruge javascript, er synkronisering af højder !o]

-- velbekomme '-)
Avatar billede triple-x Nybegynder
02. april 2005 - 19:07 #11
vise ord du kommer med Roenving, og ja der er efterhånden ved at opstå en religion inden for det, men jeg vil se om jeg så ikke kan lave en blandning og bruge det der hvor det er mest fornuftigt, i starten er det mest for at øve mig på kodning af CSS'en da det altid har været et "glemt" punkt i min dagsordning.

Jeg takker for hjælpen, du har fået karma og point.
Avatar billede roenving Novice
02. april 2005 - 19:10 #12
-- og jeg takker for point ;~}
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

Seneste spørgsmål Seneste aktivitet
I dag 10:21 Ny printer, men hvilken Af mort1 i Printere
I går 19:41 USB på Linux Af Uvanga i Linux
12/0818:26 Hvilken type mus Af mort1 i PC
11/0813:21 ms Forms Af leahcim i Andet software
10/0821:30 Blokeret på Snapchat? Af LineP i Chat & Messaging