Søg
Avatar billede steen_hansen Forsker
02. december 2005 - 00:19 Der er 28 kommentarer og
3 løsninger

Centrering v.hj.a. DIV

Jeg har forsøgt at centrere på denne måde:

<div style="text-align: center">
..........
</div>

- men det hjælper ikke. Hvordan er syntaksen?
Avatar billede mikkel_robin Nybegynder
02. december 2005 - 00:21 #1
<div align="center">
Avatar billede mikkel_robin Nybegynder
02. december 2005 - 00:21 #2
eller
<center></center>
Avatar billede steen_hansen Forsker
02. december 2005 - 00:23 #3
Hej Mikkel

Ingen af dine forslag er "validérbar" :)
Avatar billede mikkel_robin Nybegynder
02. december 2005 - 00:26 #4
Ifgl hvad? men hvad er der for øvrigt galt med "text-align: center;" for det virker da fint...
Avatar billede steen_hansen Forsker
02. december 2005 - 00:28 #5
Iflg. W3C's anbefalinger.

Det virker ikke hos mig.
Avatar billede mikkel_robin Nybegynder
02. december 2005 - 00:29 #6
hvilken browser?
Avatar billede steen_hansen Forsker
02. december 2005 - 00:31 #7
Det er sådan set underordnet i hvilke browsere, det skal virke i alle. Men jeg tester i MSIE, Mozilla og Opera.
Avatar billede mikkel_robin Nybegynder
02. december 2005 - 00:31 #8
Jeg har lige testet med Firefox 1.0.7 og IE 6.0... virker fint i begge
Avatar billede mikkel_robin Nybegynder
02. december 2005 - 00:37 #9
Men hvis jeg paster:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Tester</title>
</head>
<body>
<div align="center">Test</div>
</body>
</html>


På http://validator.w3.org/ skulle det efter sigende være valideret...
Avatar billede steen_hansen Forsker
02. december 2005 - 00:37 #10
Ja, men f.eks. <center></center> er noget gammelt HTML3. Der skal benyttes CSS (se kategorien). Jeg mente helt bestemt det var <div style="text-align: center">, men det virker ikke. Ellers havde jeg ikke oprettet spørgsmålet :o)

Det er meget simpelt. Men det, jeg har lavet, er åbenbart ikke korrekt.
Avatar billede steen_hansen Forsker
02. december 2005 - 00:38 #11
Du mangler linket i din !DOCTYPE, den er værdiløs uden linket:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

skal være

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Så det kan ikke valideres :o)
Avatar billede softspot Forsker
02. december 2005 - 01:33 #12
Hvad med

style="margin:0 auto;"
Avatar billede softspot Forsker
02. december 2005 - 01:40 #13
Næh! Det virker ikke... :(

Jeg dog godt få text-align:center til at fungere i IE 6.0 (med Transitional DOCTYPE), så jeg er lidt nysgerrig for at høre om der er andre styles på det div du ikke kan få det til at fungere i...? Kan du vise lidt mere kode og/eller CSS-indstillinger for det pågældende div og dets kontekst (for hvis den kontainer div'et ligger i, ikke er bredere end div'et selv, så vil en centrering ikke blive synlig).

Prøv evt. for testens skyld at sætte en border på dit div...
Avatar billede softspot Forsker
02. december 2005 - 01:43 #14
...det fungerer i øvrigt også i FF 1.0
Avatar billede stich Nybegynder
02. december 2005 - 06:38 #15
Det kommer jo lidt an på, hvad det er der skal centreres. Måske nedenstående kan hjælpe:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
div#container {
    text-align:center; /* centrerer tekst inde i div'en - og IE centrerer fejlagtigt også
                          indre elementer, således at man opnår en center-element effekt */
    margin:0 auto; /* centrerer selve div'en... */
    width:600px; /* ...men ingen synlig effekt uden en angivet bredde */
    border:1px solid #f00; /* ...når nu IE ikke forstår outline... */
}
p {
    margin:0;
}
p#first {
    border:1px solid #0f0;
    /* Bemærk: bredde == 100% */
}
p#second {
    width:300px; /* hvis den var 100% ville dens indhold også blive
                    centreret af containerens text-align:center */
    border:1px solid #00f;
    /* margin:0 auto; */
    /* 'indkommenter' ovenstående linje, for også at centrere
      div'en i - på dette punkt - W3C-kompatible browsere */
}
</style>
</head>
<body>
    <div id="container">
        <p id="first">foo</p>
        <p id="second">bar</p>
    </div>
</body>
</html>
Avatar billede stich Nybegynder
02. december 2005 - 06:45 #16
Jeg må forresten hellere lige præcisere, at text-align:center ikke blot centrerer tekst, men alle inline-elementer -- og de indre p-elementers inline-elementer arver så denne property.
Avatar billede apo Praktikant
02. december 2005 - 17:53 #17
Softspot > Du mangler at angive en bredde på div'et:

<div style="margin:0 auto; width:800px;"></div>

Ovenstående vil centrere div'et præcist i midten af siden (I forhold til div'ets bredde), når blot indholdet af div'en ikke overskrider 800px i bredden (Bredden kan selvfølgelig ændres efter behov). Men uden bredden, ved browseren ikke hvor den skal sætte margenerne på elementet.

Det samme kan gøres på et table:

<table style="margin:0 auto; width:800px;">
  <tr>
    <td>Mit indhold</td>
  </tr>
</table>

... Og det er valid kode :-)
Avatar billede roenving Novice
03. december 2005 - 03:14 #18
-- og på alle andre block-level elementer !-)
Avatar billede apo Praktikant
03. december 2005 - 11:18 #19
Jeps :-)
Avatar billede stich Nybegynder
03. december 2005 - 11:53 #20
I mit eksempel bør kommentaren "hvis den var 100% ville dens indhold også blive centreret af containerens text-align:center" egentlig også slettes, inline-elementerne bliver jo netop centrerede hvad enten bredden er angivet eller ej.

Og - for nu at være pernittengryn, så bør browserne altså godt vide både hvor og hvordan de skal sætte marginerne (:-)); de bliver blot sat til 0, da width som standard har værdien auto, jf. http://www.w3.org/TR/CSS21/visudet.html#Computing_widths_and_margins
Avatar billede steen_hansen Forsker
03. december 2005 - 12:41 #21
Tak for kaffe! Jeg var til julefrokost i går, herligt med en masse input :o)

Jeg kigger det igennem senere :o)
Avatar billede steen_hansen Forsker
03. december 2005 - 12:48 #22
Min oprindelige idé var at lave dette:

<fieldset style="padding: 20px; margin: 0px auto">
    <legend>Tekst 1</legende>
        Indhold 1
</fieldset>
<fieldset style="padding: 20px; margin: 0px auto">
    <legend>Tekst 2</legende>
        Indhold 2
</fieldset>
<fieldset style="padding: 20px; margin: 0px auto">
    <legend>Tekst 3</legende>
        Indhold 3
</fieldset>

Men det kom mildest talt til at se mærkeligt ud.

Jeg har sideløbende haft meget bøvl med nestede tables, specielt i MSIE og Opera kan det gå galt. Når hhv. margin og padding (og hvad der nu er forsøgt brugt) er på plads i den ene, så går det galt i den anden. Typisk forrykker det sig 1 - 3 pixels. Og så er det kontinuiteten forsvinder :o/
Avatar billede steen_hansen Forsker
03. december 2005 - 12:49 #23
<fieldset style="width: 500px; padding: 20px; margin: 0px auto">

Glemte lige width
Avatar billede roenving Novice
06. december 2005 - 11:47 #24
-- og det er vel en tavetosse, når du skriver </legende> ...
Avatar billede steen_hansen Forsker
06. december 2005 - 20:52 #25
Tja, det er noget, der rykke, når man kan formulerer sig og staver: copy/paste = gentag fejl. Hva' ka' jeg si'? :o)

Jeg har ikke haft mulighed for at kigge nærmere på Jeres kommentarer, vender tilbage snarest :o)
Avatar billede steen_hansen Forsker
25. december 2005 - 17:07 #26
softspot, apo, smid lige et svar. Jeg har ikke fundet en konkret løsning på det, som jeg også vil have løst, men jeg opretter et nyt spørgsmål. Tak for hjælpen, alle Jeres input var brugbare. Og fortsat god Jul :o)
Avatar billede softspot Forsker
25. december 2005 - 18:54 #27
Så får du et herfra. Håber du finder en løsning på din udfordring - og tak i lige måde... :)
Avatar billede apo Praktikant
25. december 2005 - 23:26 #28
Og et svar herfra :-)
Avatar billede steen_hansen Forsker
26. december 2005 - 00:14 #29
Takker alle for hjælpen :o)
Avatar billede apo Praktikant
26. december 2005 - 00:35 #30
Velbekomme, og tak for points :-)
Avatar billede softspot Forsker
26. december 2005 - 07:13 #31
ja, tak 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
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
02/0814:53 TV4ever 3.0 Af valby i Diverse
01/0816:21 Installere Ubuntu på Virtuel Maskine Af Uvanga i Andet software
01/0809:38 Microsoft har igen ødelagt mit højreklik Af valby i Windows
30/0714:41 To mails fra YouSee - Jeg tror ikke altid på tilfældigheder Af mort1 i Andet sikkerhed
27/0714:34 Hjælp til at kunne skanne negativer på Plustek 8300i SE Af Mariann i Foto & video
White papers
Flere white papers »