Søg
Avatar billede tzr Nybegynder
20. oktober 2004 - 21:25 Der er 9 kommentarer og
1 løsning

Centrering af div med CSS

Hvordan får jeg følgende div til at blive centreret i vinduet, både horisontalt og vertikalt. Mit problem er lidt at den skal have de dimensioner, og samtidig passe i midten i alle opløsninger og browservinduer.

Nogen der har en smart løsning ?


<div style="width: 720px; height: 415px;">
... indhold ...
</div>
Avatar billede syvon Nybegynder
20. oktober 2004 - 22:55 #1
dette virker i både IE og moz

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

    <head>
<meta name="Generator" content="Stone's WebWriter 4">
        <style type="text/css" media="screen"><!--
body
    {
    color: white;
    background-color: #009;
    margin: 0px
    }

#content     
    {
    font-family: Verdana, Geneva, Arial, sans-serif;
    background-color: red;
    text-align: center;
    margin-top: -208px;
    margin-left: -360px;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 720px;
    height: 416px;
    visibility: visible
    }


--></style>
    </head>

    <body>
       
            <div id="content">
                    ... indhold ...            </div>
       
        </body>

</html>
Avatar billede syvon Nybegynder
20. oktober 2004 - 23:07 #2
skal lige tilføjes at jeg har tilladt mig at ændre højden til 416px da det er lidt nemmere at dele med 2
Avatar billede hermandsen Juniormester
20. oktober 2004 - 23:28 #3
Syvon har godt nok svaret, men for lige at komme med et eksempel mere, så er dette også muligt:

div {
  margin-left: auto;
  margin-right: auto;
  display: table-cell; /* Dette forstår IE ikke */
  vertical-align: middle; /* vertical-align er kun muligt ved tabel-cells, men det ignorer IE, så det virker også her */
}

Faktisk burde du måske sætte vertical-align og display-egenskaberne ind i div-elementets moder-element, men hva' fanden... :)

Igen, det er bare endnu en metode... Syvon fortjener point!! :)
Avatar billede olebole Juniormester
20. oktober 2004 - 23:41 #4
<ole>

mjaahhh ... det er nu ikke helt korrekt, at vertical-align kun kan bruges på tabelceller ... de fungerer bare anderledes på tabelceller  ;o)

Prøv f.eks. at skifte værdi på denne:
  <div><textarea style="vertical-align:middle"></textarea> En eller anden tekst</div>

/mvh
</bole>
Avatar billede hermandsen Juniormester
20. oktober 2004 - 23:51 #5
Fedt!! Så lærte jeg også noget i dag... :)

'vertical-align'
    Applies to: inline-level and 'table-cell' elements

Synes dog det virker lidt mystisk at teksten i div-tag'et bliver alignet, når stylen er sat på textarea'et... Er det bare mig!?
Avatar billede syvon Nybegynder
21. oktober 2004 - 00:00 #6
>>hermandsen. ja så er du ikke den eneset der lærte noget nyt. Kan også lige gå ind under den kategori.
Avatar billede tzr Nybegynder
21. oktober 2004 - 00:49 #7
hehe smart trick med at lave en negativ margin :)
Syvon, vil du have point ?
Avatar billede syvon Nybegynder
21. oktober 2004 - 00:53 #8
ja hvorfor ikke. :)
Avatar billede roenving Novice
21. oktober 2004 - 00:55 #9
Det var dog et herligt snydetrick, som dog har visse begrænsninger:

<div style="width:300px;height:250px;"><textarea style="vertical-align:middle;width:1px;border:0;overflow:hidden;height:250px;"></textarea> En eller anden tekst, som nu er lavet enormt meget lang, fordi at vi skal se, om den også virker, når teksten skal deles op i mere end een linje !-)</div>
Avatar billede syvon Nybegynder
21. oktober 2004 - 01:11 #10
takker for points.  :O)
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
44 min siden installere windows på separat diskpartition Af Malm i Windows
I dag 13:43 Problem med mcafee Af Malm i Andet software
I dag 13:39 Er tilstrækkelig antivirus incl på ny Samsung smartphone ? Af annam i Backup- & Antivirus
I går 19:46 Skift fra Microsoft365 til Microsoft 2024 Af 1Dorte i Office & Kontorpakker
18/0816:51 Links m.m. virker ikke Af Kjeld Aage Christiansen i PC
White papers
Flere white papers »