---

På
http://home19.inet.tele.dk/storms/skabelon_div/test_div.html

er den negative tekst forsøgt centreret vertikalt med en
vertical-align: middle i css'en. Desværre har den ingen effekt.

I øjeblikket har jeg ud over vertical-align: middle givet den
position: relative; top: 12px; right: 6px; bottom: 12px; left: 6px;
vertical-align: middle

Det giver jo noget luft - men centrerer ikke.
Er der en anden måde at gøre det på?

--
Venlig hilsen Nina Storm

---

Storm wrote:
> På
> http://home19.inet.tele.dk/storms/skabelon_div/test_div.html
>
> er den negative tekst forsøgt centreret vertikalt med en
> vertical-align: middle i css'en. Desværre har den ingen effekt.
>
> I øjeblikket har jeg ud over vertical-align: middle givet den
> position: relative; top: 12px; right: 6px; bottom: 12px; left: 6px;
> vertical-align: middle
>
> Det giver jo noget luft - men centrerer ikke.
> Er der en anden måde at gøre det på?
>

Vertical-align virker kun på tabeller.
Hvis du bruger display:table-cell; på din div burde det virke, tror jeg?

--

Mvh
Thomas

---

Thomas Gade <thomas@bolignet-aarhus.invalid> wrote:

> Vertical-align virker kun på tabeller.

Tak for info.

> Hvis du bruger display:table-cell; på din div burde det virke, tror jeg?

Der findes altså ikke nogen der direkte kan få tekst i en div til at
centrere vertikalt?
Jeg er lidt nervøs for om der kommer andre bivirkninger hvis man bruger
display:table-cell; på en div - men det skal jeg måske ikke være

--
Venlig hilsen Nina Storm

---

Storm wrote:
> Der findes altså ikke nogen der direkte kan få tekst i en div til at
> centrere vertikalt?

Jo, line-height. Altså f.eks. <div style="height: 100px; line-height:
100px; text-align: center;">Tekst centreret både vertikalt og
horizontalt.</div>

Ovenstående virker dog kun, hvis der kun er tale om 1 linje tekst så
løsningen er ikke meget værd ;)

--
Peter Farsinsen
peter at farsinsen dot dk

---

Thomas Gade skrev:

> Vertical-align virker kun på tabeller.

Nej, det er ikke korrekt. Vertical-align er defineret for
tabelceller samt inline-indhold.

Se <http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align>
eller tråden "CSS alternativ til align=middle"

Vertical-align kan rigtignok ikke bruges til at centrere indhold i
en blok direkte. Det er fordi at justeringen af inline-indhold sker
i forhold til linjehøjden og ikke i forhold til højden af den
omgivende blok.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

---

Jens Gyldenkærne Clausen wrote:

> Vertical-align kan rigtignok ikke bruges til at centrere indhold i
> en blok direkte. Det er fordi at justeringen af inline-indhold sker
> i forhold til linjehøjden og ikke i forhold til højden af den
> omgivende blok.

Hmm, nogen forklaring på hvorfor flg. ikke virker i IE? Desuden synes
jeg det er meget sjovt, at det rent faktisk ikke er lykkedes mig at få
et eneste af billederne 'helt' centreret, ved brug af logisk matematik i
css'en.

-> http://kloegt.dk/css/vertical-align.php

På det 2. nederste eksempel (med billede) er:

Div'et er 100px + 2px til border.
Billedet er 30px i højden - ingen border.
Line-height er 100px ligesom div'et.

Der er dog 37px over billedet og 33px under billedet, dvs. matematikken
går op, billedet er bare ikke centreret.

På det nederste eksempel er line-height sat til 96px og resten af
eksemplet er mangen til ovenstående. Dette eksempel giver 35px både over
og under billedet - altså er billedet vertikalt centreret.

Ovenstående gør sig gældende i Firefox 1.0. Tjekker jeg derimod i opera
virker 3. og 4. eksempel (fra toppen). Det nederste eksempel, der virker
i Firefox, er ikke centreret i Opera.

Så er der lidt at tænke over eller måske sku' I bare rette min css ;)

--
Peter Farsinsen
peter at farsinsen dot dk

---

Jens Gyldenkærne Clausen wrote:
> Thomas Gade skrev:
>
>
>>Vertical-align virker kun på tabeller.
>
>
> Nej, det er ikke korrekt. Vertical-align er defineret for
> tabelceller samt inline-indhold.
>

Så lærte jeg også lidt i dag


--

Mvh
Thomas

---

Peter Farsinsen skrev:

> Hmm, nogen forklaring på hvorfor flg. ikke virker i IE?

Nu skriver du ikke konkret hvad du ønsker at opnå, men at dømme
efter siden ser det ud til at du vil lave lodret centrering ved
hjælp af line-height og vertical-align.

Både Firefox og Opera centrerer billede 3-5. Når IE ikke følger
med, kan det skyldes mangelfuld understøttelse af css. Til forsvar
for IE vil jeg dog indvende at kombinationen af line-heigt og
vertical-align så vidt jeg kan se ikke er beregnet til at lave
lodret centrering.

Vertical-align virker fint til at justere erstattet indhold
(billeder mv.) i forhold til omgivende tekst - og det virker også
fint i tabelceller. Men det virker altså ikke problemfrit til
lodret centrering uden tabeller.


> Der er dog 37px over billedet og 33px under billedet, dvs.
> matematikken går op, billedet er bare ikke centreret.

Har du tjekket alle relevante værdier af margen og padding i spil?


> Så er der lidt at tænke over eller måske sku' I bare rette min
> css ;)

Det ville være en del lettere hvis du ikke havde angivet den
inline. Edit CSS-funktionen i min browser kan ikke arbejde med css
tilføjet direkte på html-elementerne.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

---

Jens Gyldenkærne Clausen wrote:

>>Hmm, nogen forklaring på hvorfor flg. ikke virker i IE?

> Nu skriver du ikke konkret hvad du ønsker at opnå, men at dømme
> efter siden ser det ud til at du vil lave lodret centrering ved
> hjælp af line-height og vertical-align.

Næeh, jeg legede bare med at få billedet vertikalt centreret - midlerne
er ligemeget bare det er nemt og validt.

> Både Firefox og Opera centrerer billede 3-5. Når IE ikke følger
> med, kan det skyldes mangelfuld understøttelse af css. Til forsvar
> for IE vil jeg dog indvende at kombinationen af line-heigt og
> vertical-align så vidt jeg kan se ikke er beregnet til at lave
> lodret centrering.

> Vertical-align virker fint til at justere erstattet indhold
> (billeder mv.) i forhold til omgivende tekst - og det virker også
> fint i tabelceller. Men det virker altså ikke problemfrit til
> lodret centrering uden tabeller.

Hmm, jamen det er jo for så vidt også hvad jeg gør. Line-height: er så
vidt jeg ved sat så snart man sætter font-size.

>>Der er dog 37px over billedet og 33px under billedet, dvs.
>>matematikken går op, billedet er bare ikke centreret.

> Har du tjekket alle relevante værdier af margen og padding i spil?

Hvordan tjekker jeg det, udover at jeg har mulighed for at sætte hele
baduljen til 0?

> Det ville være en del lettere hvis du ikke havde angivet den
> inline. Edit CSS-funktionen i min browser kan ikke arbejde med css
> tilføjet direkte på html-elementerne.

Hermed gjort ;)

--
Peter Farsinsen
peter at farsinsen dot dk