Notifikationer

Markér alle som læst Log ud

musicchart.dk Nybegynder

09. februar 2006 - 11:38 Der er 10 kommentarer og
1 løsning

vertical-align: middle; hvorfor?

HTML fil:

<body>
<div class="contDiv">
<span style="vertical-align:middle;">
<div class="contMain"></div>
</span>
</div>
</body>

CSS fil (er inkluderet i html filen):

body, html {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background-color : #393939;
text-align: left;
}

.contDiv {
width: 100%;
height: 100%;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
text-align:left;
vertical-align:middle;
}

.contMain {
width: 100%;
height: 494px;
background-color : #000000;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
text-align:left;
vertical-align:middle;
border-bottom: solid 3px #4b4945;
border-top: solid 3px #4b4945;
}

#########################################

Mit spørgsmål lyder så på: hvordan får jeg contMain til at ligge vertikalt centreret? Jeg burde egentlig være dækket rigeligt ind, med den css kode jeg bruger, men nej. contMain ligger stadigvæk i toppen.

Er der en der kan finde fejlen?

Hilsen,
Bjarke

Synes godt om

musicchart.dk Nybegynder

09. februar 2006 - 12:09 #1

Underligt... nu prøvede jeg lige uden css... og det virker heller ikke. Teksten står i toppen:

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle">test</td>
</tr>
</table>

Synes godt om

musicchart.dk Nybegynder

09. februar 2006 - 12:11 #2

Nu er jeg skræmt... jeg har lige testet ovenstående html, på en anden pc, men med akkurat samme browser som jeg sidder ved (IE 6.0) - og der vil den godt sætte teksten i vertikal center.

Synes godt om

musicchart.dk Nybegynder

09. februar 2006 - 12:14 #3

mht. HTML'en, var det åbentbart denne linie der ødelagde det hele:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Synes godt om

musicchart.dk Nybegynder

09. februar 2006 - 12:18 #4

Men er der ikke en måde at vertikal centrere en kasse? (jøsses, jeg sidder jo bare og skriver med mig selv :o) )

Synes godt om

johan.o Nybegynder

09. februar 2006 - 12:20 #5

Hm, vertical-align virker så vidt jeg husker 2 steder. Det virker i tabel celler, og det virker på inline-elementer f.eks. <span>. Tabel funktionaliteten giver sig selv, men på inline elementer tager den udgangspunkt i line-height, så den kan bruges til at centrere f.eks. et ord i det vertikale plan.

Din brug af <span> er ikke korrekt, man bør ikke placere block elementer (<div>) inde i inline-elementer (<span>)...det giver ingen mening :)

Efter min mening er den nemmeste måde at opnå den vertikale centrering du efterlyser, at bruge en tabel. F.eks. sådan her :

CSS :

body, html {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background-color : #393939;
text-align: left;
height: 100%;
}

.contTable {
width: 100%;
height: 100%;
border: 0px;
border-collapse: collapse; }

.contMain {
width: 100%;
height: 494px;
background-color : #000000;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
text-align:left;
vertical-align:middle;
border-bottom: solid 3px #4b4945;
border-top: solid 3px #4b4945;
}

Læg mærke til height: 100% i html, body.

HTML :

<body>

<table class="contTable" cellspacing="0" cellpadding="0">
<tr>
<td style="vertical-align: middle;">
<div class="contMain"></div>
</td>
</tr>
</table>

</body>

Og nu vil den opmærksomme læser jo sige, jamen jeg skal også have centreret indholdet i contMain....ja og der ligger løsningen jo lige for :)

Mvh. Johan

Synes godt om

musicchart.dk Nybegynder

09. februar 2006 - 12:26 #6

Meget af det jeg laver giver ikke ret meget mening :o)

Tak for hjælpen Johan, det virker jo efter hensigten. Vil du ligge et svar, så lukker jeg spørgsmålet.

Hilsen,
Bjarke

Synes godt om

johan.o Nybegynder

09. februar 2006 - 12:36 #7

Ahr, nu syntes jeg du er hård ved dig selv :)

Prøv at se på denne lille detalje :

CSS

body, html {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background-color : #393939;
text-align: left;
height: 100%;
}

.contTable {
width: 100%;
height: 100%;
border: 0px;
border-collapse: collapse; }

.contMain {
width: 100%;
height: 494px;
background-color : #000000;
margin: auto 0px;
text-align:left;
border-bottom: solid 3px #4b4945;
border-top: solid 3px #4b4945;
}

HTML

<body>

<table class="contTable" cellspacing="0" cellpadding="0">
<tr>
<td>
<div class="contMain"></div>
</td>
</tr>
</table>

</body>

Nu er der overhovedet ikke brugt vertical-align, istedet er der sat margin: auto 0px; på contMain. Første værdi (auto) betyder grundlæggende at top og bund margin skal sættes til det samme og næste værdi 0px betyder at højre og venstre margin skal sættes til 0px. Derfor kan margin også bruges til at centrere block elementer, det kræver dog at nogle betingelser er opfyldt. For det første skal, i dette tilfælde, højden på det element du vil centrere være defineret...her 494px...samtidig skal det omkransende elements højde jo også være defineret, derfor 100% på html, body og så 100% på tabellen.

Mvh. Johan

Synes godt om

johan.o Nybegynder

09. februar 2006 - 12:43 #8

Og så med hensyn til at centrere vertikalt i contMain.

Hvis contMain indeholder block elementer kan du centrere dem ved at bruge margin: auto 0px; hvis den derimod skal indeholde inline elementer ville jeg ændre <div> til en tabel mere og så bruge vertical-align: middle; på cellen <td>.

Og et svar :)

Mvh. Johan

Synes godt om

johan.o Nybegynder

09. februar 2006 - 12:45 #9

Og forresten så var du lige forbi DOCTYPE, den skal du endelig ikke fjerne :) for så ryger du virkelig ud på 'herrens mark'.

Mvh. Johan

Synes godt om

musicchart.dk Nybegynder

09. februar 2006 - 12:52 #10

Nej, jeg smed også DOCTYPE'en på igen :o)

Tak for de dybegående svar, det giver god karma ;o)

Synes godt om

johan.o Nybegynder

09. februar 2006 - 13:03 #11

Tak for points..og det løse :)

Mvh. Johan

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

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

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