|
|
 | vertical-align i div
Fra : Lars Hoffmann |
Dato : 10-02-04 14:46 |
|
Tag en kigger p`denne:
<html>
<head>
<title>Untitled</title>
<style>
div
{
vertical-align:middle;
height:400px;
width:400px;
}
</style>
</head>
<body>
<div >
Test
</div>
</body>
</html>
Jeg havde jo håbet på at det ville centrere teksten verticalt i min div, men
det gør det jo ikke. Hvordan kan jeg styre vertical alignment i min div?
Med venlig hilsen
Lars Hoffmann
| |
 Erik Ginnerskov (10-02-2004)
| Kommentar
Fra : Erik Ginnerskov |
Dato : 10-02-04 15:25 |
|
"Lars Hoffmann" <lars@intercambiodvd.com> skrev
> <html>
> <head>
> <title>Untitled</title>
> <style>
> div
> {
> vertical-align:middle;
> height:400px;
> width:400px;
> }
> </style>
> </head>
>
>
> Jeg havde jo håbet på at det ville centrere teksten verticalt i min div,
men
> det gør det jo ikke. Hvordan kan jeg styre vertical alignment i min div?
Måske fordi du ikke har færdiggjort style-erklæringen. Gør sådan:
<style type="text/css">
div
{
vertical-align:middle;
height:400px;
width:400px;
}
</style>
--
Med venlig hilsen
Erik Ginnerskov
http://www.hjemmesideskolen.dk - http://www.html-faq.dk
http://hjem.get2net.dk/egin
| |
Lars Hoffmann (10-02-2004)
| Kommentar
Fra : Lars Hoffmann |
Dato : 10-02-04 15:29 |
|
"Erik Ginnerskov" <eginNOSPAM@html-faq.dk> escribió
> Måske fordi du ikke har færdiggjort style-erklæringen. Gør sådan:
Nej, det er ikke derfor. Det er fordi i en div bruges vertical align til at
alignere over line-height, hvorimod den i en <td> aligneres i forhold til
hele cellen.
Men hvordan kan man så alignere vertikalt i en div?
| |
 Knud Gert Ellentoft (10-02-2004)
| Kommentar
Fra : Knud Gert Ellentoft |
Dato : 10-02-04 15:47 |
|
"Lars Hoffmann" <lars@intercambiodvd.com> skrev :
>Men hvordan kan man så alignere vertikalt i en div?
Fordi vertical-align ikke virker på blokelementer.
Indsætter du display: inline-table så skulle det også virke på
blokelementer.
div
{
vertical-align:middle;
height:400px;
width:400px;
display: inline-table
}
--
Knud
| |
Lars Hoffmann (10-02-2004)
| Kommentar
Fra : Lars Hoffmann |
Dato : 10-02-04 15:53 |
|
"Knud Gert Ellentoft" <ellentoft@mail.tele.invalid> escribió
> Indsætter du display: inline-table så skulle det også virke på
> blokelementer.
Jeg vil ikke afvise at det er en fejl i IE, men det ser ikke ud til at
virke.
Med venlig hilsen
Lars hoffmann
| |
Knud Gert Ellentoft (10-02-2004)
| Kommentar
Fra : Knud Gert Ellentoft |
Dato : 10-02-04 16:31 |
|
"Lars Hoffmann" <lars@intercambiodvd.com> skrev :
>Jeg vil ikke afvise at det er en fejl i IE, men det ser ikke ud til at
>virke.
Næh, det gør det heller ikke.
Det skulle være:
div
{
vertical-align: middle;
display: table-cell;
height: 400px;
width: 400px;
border: 1px solid black
}
--
Knud
| |
Lars Hoffmann (10-02-2004)
| Kommentar
Fra : Lars Hoffmann |
Dato : 10-02-04 16:40 |
|
"Knud Gert Ellentoft" <ellentoft@mail.tele.invalid> escribió
> div
> {
> vertical-align: middle;
> display: table-cell;
> height: 400px;
> width: 400px;
> border: 1px solid black
> }
Der er heller ikke bonus med IE.
| |
Knud Gert Ellentoft (10-02-2004)
| Kommentar
Fra : Knud Gert Ellentoft |
Dato : 10-02-04 16:50 |
|
"Lars Hoffmann" <lars@intercambiodvd.com> skrev :
>Der er heller ikke bonus med IE.
Den IE, virker fint i Mozilla og Opera.
Så det må jo nok konstateres, at det ikke er muligt i IE.
Det eneste du kan er så at sætte margin-top, hvis du kender
størrelsen på teksten, så det ser ud som om, den er placeret i
midten.
<div>
<p style="margin-top: 190px"Indhold</p>
</div>
og så undlade vertical-align, da det ellers vil fejle i andre
browsere.
--
Knud
| |
Lars Hoffmann (10-02-2004)
| Kommentar
Fra : Lars Hoffmann |
Dato : 10-02-04 16:55 |
|
"Knud Gert Ellentoft" <ellentoft@mail.tele.invalid> escribió
> Så det må jo nok konstateres, at det ikke er muligt i IE.
Fantastisk træls.
> Det eneste du kan er så at sætte margin-top, hvis du kender
> størrelsen på teksten, så det ser ud som om, den er placeret i
> midten.
Det gør jeg så desvørre ikke. Den eneste brugbare udvej for mig er at skifte
min <div> ud med en <table>, hvilket jeg ellers ikke er glad for at gøre.
Med venlig hilsen
Lars hoffmann
| |
Morten Winkler Jørge~ (11-02-2004)
| Kommentar
Fra : Morten Winkler Jørge~ |
Dato : 11-02-04 11:17 |
|
> Det gør jeg så desvørre ikke. Den eneste brugbare udvej for mig er at
> skifte min <div> ud med en <table>, hvilket jeg ellers ikke er glad for at
> gøre.
Nej. Der er stadig ting der ikke lader sig gøre med CSS som vi kunne/kan med
tabeller.
Morten.
--
Dagens undskyldning: "Browser's cookie is corrupted -- someone's been
nibbling on it."
| |
Lars Hoffmann (11-02-2004)
| Kommentar
Fra : Lars Hoffmann |
Dato : 11-02-04 14:54 |
|
"Morten Winkler Jørgensen" <morten@spam_min_mås_af.popp-winkler.dk> escribió
> Nej. Der er stadig ting der ikke lader sig gøre med CSS som vi kunne/kan
med
> tabeller.
Jeg fandt en løsning som jeg er udemærket tilfreds med:
<html>
<head>
<title>Untitled</title>
<style>
div
{
margin-top:-200px;
margin-left:-200px;
position:absolute;
top:50%;
left:50%;
height:400px;
width:400px;
background:#000000;
}
</style>
</head>
<body>
<div >
Test
</div>
</body>
</html>
| |
Knud Gert Ellentoft (11-02-2004)
| Kommentar
Fra : Knud Gert Ellentoft |
Dato : 11-02-04 15:05 |
|
"Lars Hoffmann" <lars@intercambiodvd.com> skrev :
>Jeg fandt en løsning som jeg er udemærket tilfreds med:
Øhh, her er det <div>, der er placeret i midten af vinduet og
teksten står øverst.
(Og den løsning har været fremme mange gange i gruppen)
Var det ikke meningen, at teksten skulle stå i midten af <div>?
Ellers havde jeg da totalt misforstået det.
--
Knud
| |
Lars Hoffmann (11-02-2004)
| Kommentar
Fra : Lars Hoffmann |
Dato : 11-02-04 15:10 |
|
"Knud Gert Ellentoft" <ellentoft@mail.tele.invalid> escribió
> Var det ikke meningen, at teksten skulle stå i midten af <div>?
>
> Ellers havde jeg da totalt misforstået det.
Jo, det var også et problem. Jeg har nok ikke udtrykt mig korrekt, da jeg i
mit indledende indlæg antog at løsning til både at centrere en tekst og en
div indeni en blok var den samme.
Men du har da ret. Teksten centreres stadig ikke i div'en.
MEd venlig hilsen
Lars Hoffmann
| |
Ryan Kristensen (14-02-2004)
| Kommentar
Fra : Ryan Kristensen |
Dato : 14-02-04 02:48 |
|
On Tue, 10 Feb 2004 16:50:29 +0100, Knud Gert Ellentoft
<ellentoft@mail.tele.invalid> wrote:
> Så det må jo nok konstateres, at det ikke er muligt i IE.
>
> Det eneste du kan er så at sætte margin-top, hvis du kender
> størrelsen på teksten, så det ser ud som om, den er placeret i
> midten.
Hvis man nu må snyde lidt og bruge javascript, så burde det da kunne lade
sig gøre.
http://ryankristensen.com/vertical.html
--
Ryan Kristensen
| |
Jens Gyldenkærne Cla~ (10-02-2004)
| Kommentar
Fra : Jens Gyldenkærne Cla~ |
Dato : 10-02-04 16:55 |
| | |
|
|