Søg
Avatar billede spooolll Nybegynder
18. oktober 2003 - 19:08 Der er 14 kommentarer og
3 løsninger

<div> centrering

Jeg har lavet en <DIV>, hvilken jeg har givet position:absolute;

Jeg vil gerne have sat denne <DIV> til at være center på siden,  Altså så den er centreret på siden, ved alle opløsninger. Hvordan gør man det?
Avatar billede Slettet bruger
18. oktober 2003 - 19:14 #1
En <div> fylder hele sidens bredde, så hvis du skal have noget centreret inde i den kan du sige

<div style="text-align:center">hej</div>
Avatar billede spooolll Nybegynder
18. oktober 2003 - 19:16 #2
Øhh....min <DIV> fylder kundet jeg har sat den til i bredden, hvilket vil sige 445pixel
Avatar billede nicklasb Nybegynder
18. oktober 2003 - 19:19 #3
skal den bare centreres vandret, eller er det både vandret og lodret vi snakker om her?
Avatar billede spooolll Nybegynder
18. oktober 2003 - 19:21 #4
den skal kun centreres vandret
Avatar billede walfi Nybegynder
18. oktober 2003 - 19:22 #5
<div align="center">Tekst </div>
Avatar billede nicklasb Nybegynder
18. oktober 2003 - 19:24 #6
<div style="text-align: center; width: 100%;">
<div style="text-align: left">hej</div>
</div>

Sådan ville jeg gøre det.. :D
Avatar billede spooolll Nybegynder
18. oktober 2003 - 19:25 #7
det kan man ikke med position absolute
Avatar billede nicklasb Nybegynder
18. oktober 2003 - 19:30 #8
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
      <title>Absolut div!!</title>
<style>
.div {
background-color: #ff0000;
left: 223px;
position: absolute;
text-align: center;
width: 446px;
}
</style>
</head>
<body>
<div class="div">
    <div style="text-align: left;">hej</div>
</div>
</body>
</html>
Avatar billede nicklasb Nybegynder
18. oktober 2003 - 19:31 #9
hov.. sorry.. glem kommentaren.. min fejl..
Avatar billede nicklasb Nybegynder
18. oktober 2003 - 19:34 #10
det er nok noget nærmere
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
      <title>Absolut div!!</title>
<style>
.div {
position: absolute;
text-align: center;
width: 100%;
}
</style>
</head>
<body>
<div class="div">
    <div style="width: 200px; background-color: #ff0000; text-align: left;">hej</div>
</div>
</body>
</html>
Avatar billede roenving Novice
19. oktober 2003 - 05:51 #11
<div style="position:absolute;width:445px;left:50%;margin-left:-222px;background:yellow;height:200px;">Her</div>
Avatar billede ataris Nybegynder
19. oktober 2003 - 11:06 #12
Der er dog et problem med den måde roenving, hvis browservinduet er mindre end 445px bredt, viser den ikke det hele, dvs. det helt ude til venstre. Men det er også den måde jeg bruger, og den er fin nok hvis <div>-elementet ikke skal være for bredt.
Avatar billede roenving Novice
20. oktober 2003 - 01:20 #13
Det er bagdelen ved den metode, ja !-)

Jeg bruger selv en tabel til at centrere af samme grund ...
Avatar billede foxy_lady Nybegynder
22. oktober 2003 - 07:59 #14
prøv at sætte margin-left: og margin-right: til auto; i din div
Avatar billede pixeldude Nybegynder
09. november 2003 - 16:32 #15
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
    <title>Untitled</title>
    <style type="text/css">
        #tester {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 445px;
            height: 200px;
            margin-left: -222px;
            margin-top: -100px;
            border: 1px solid #000000;
            background: #cccccc;
        }
    </style>
</head>
<body>
    <div id="tester"></div>
</body>
</html>
Avatar billede foxy_lady Nybegynder
09. november 2003 - 17:01 #16
Dette er stadig mit bud:

        .div {
            position: absolute;
            width: 100px;
            height: 100px;
            margin-left: auto;
            margin-top: auto;
            border: 1px solid #000000;
            background: #cccccc;
        }
Avatar billede foxy_lady Nybegynder
09. november 2003 - 17:02 #17
Undskyld, rettelse:

.div {
            position: absolute;
            width: 100px;
            height: 100px;
            margin-left: auto;
            margin-right: auto;
            border: 1px solid #000000;
            background: #cccccc;
        }
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
I går 18:50 Slet lokal konto Af ErikHg i Windows
I går 16:05 Ændre tal i en celle Af xvid i Excel
I går 13:47 Dette er ikke en kommerciel session i Windows 11 Af eksmojo i Windows
31/0810:26 Synkronisering af kalender mellem computer, android telefon og iPhone Af Strawberry i Andre onlineløsninger
31/0810:24 Kan Excel selv beregne alder? Af leahcim i Excel
White papers
Flere white papers »