Søg
Avatar billede daniel_d Nybegynder
21. januar 2003 - 15:38 Der er 32 kommentarer og
1 løsning

hvordan kan man centrerer en div inde i en div horizontalt + vert

hvordan kan man centrerer en div inde i en div horizontalt + vertikalt ?
F.eks hvis man har en div med width:100px; og height:100px;
inde i den laver man en anden div. hvordan kan man gøre så den kommer til at være i midten af den omsluttende div ?

mvh
Avatar billede daniel_d Nybegynder
21. januar 2003 - 15:48 #1
horizontalt kan man klare det med text-align:center;
men hvordan med vertikalt ?
Avatar billede apophisda Nybegynder
21. januar 2003 - 15:53 #2
Man kan jo være vammel, og lægge en tabel i den omsluttende div, og så bare sætte td'en til align="center" valign="middle"

Ellers skal du til at pille med koordinater så du placerer den midtpå..
Avatar billede daniel_d Nybegynder
21. januar 2003 - 15:56 #3
helst ikke tabeller...

Jeg synes selv jeg er kommet rimeligt langt, men mangler bare lige det sidste...


Tjek evt. den her kode:
VIrker i både IE 5.5, Opera 6.05 og NS 7.0 (sikkert også ældre versioner)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>d-form.dk</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
<META NAME="Author" CONTENT="d-form">
<META NAME="Owner" CONTENT="d-form">
<META NAME="Keywords" CONTENT="design, web, creative, kreativ, billig, webbureau, internet, udvikling, d-form, form, dform, d-form.dk, dform.dk">
<META NAME="Description" CONTENT="beskrivelse af d-form.dk">
<META NAME="Robots" CONTENT="all">
<META NAME="Language" CONTENT="dan">

<link rel="stylesheet" type="text/css" href="default.css">

<script language="JavaScript" type="text/javascript">
<!--
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
ie5 =(document.getElementById)? true:false
ns6 = (document.getElementById && !document.all)?true:false;

function show(id){
var styleObj = (ns4)? document.layers[id] : (ie4)? document.all[id].style : document.getElementById(id).style;
styleObj.visibility = "visible";
}

function hide(id){
var styleObj = (ns4)? document.layers[id] : (ie4)? document.all[id].style : document.getElementById(id).style;
styleObj.visibility = "hidden";
}
//-->
</SCRIPT>
<style type="text/css">
        body {
            margin:0px;
            padding:0px;
            height: 100%;
        }
        #center {
            padding:0px;
            width:300px;
            height:300px;
            text-align:center;
            position:absolute;
        }
        #Lag00 {
            position:absolute;
            top:0px;
            left:0px;
            border:1px solid red;
            width:100%;
            height:100%;
        }
    </style>
   
    <script type="text/javascript">

        function posCenter() {
        if (self.innerWidth)
            {
            frameWidth = self.innerWidth;
            frameHeight = self.innerHeight;
            }
            else if (document.documentElement && document.documentElement.clientWidth)
            {
            frameWidth = document.documentElement.clientWidth;
            frameHeight = document.documentElement.clientHeight;
            }
            else if (document.body)
            {
            frameWidth = document.body.clientWidth;
            frameHeight = document.body.clientHeight;
            }

            oCenter = document.getElementById('center');
            oCenterWidth =  oCenter.offsetWidth;
            oCenterHeight = oCenter.offsetHeight;

            nW=Math.round((frameWidth/2)-(oCenterWidth/2));
            nH=Math.round((frameHeight/2)-(oCenterHeight/2));

            oCenter.style.left=nW+'px';
            oCenter.style.top=nH+'px';
        }
       
       
       
        isOpera = (window.opera);
        var origWidth,origHeight;

        function handlerLoad() {
            if (isOpera) {
                origWidth  = this.innerWidth;
                origHeight = this.innerHeight;
                handlerResize();
            }
            posCenter();
        }

    function handlerResize() {
            if (this.innerWidth != origWidth
                    ||
                    this.innerHeight != origHeight) location.reload();
            if (isOpera) setTimeout('handlerResize()',500);
            posCenter();
    }
               
        window.onresize = handlerResize
        window.onload = handlerLoad
    </script>
   
</head>

<body scroll="No">
    <div id="center">
            <div id="Lag00" class="Lag00">
                midten. Dette er en prøve, men det kan den jo ikk gøre for.<br>Så jeg vil bare skrive lidt mere
              </div>
    </div>
</body>
</html>
Avatar billede mik789 Nybegynder
21. januar 2003 - 16:54 #4
Princippet er enkelt: det der skal centreres (f.eks. et billede som her) anbringes i en div der har samme mål som det selv. Denne anbringes igen i en div med width og height på 100%. Den indre div placeres så således at top/left punktet anbringes i centrum af den ydre div (dvs. ved top og left sættes til 50%). Dernæst rykkes den på plads med negativ margin der udgør halvdelen af div'ens højde- og breddemål.

F.eks.:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>centrering</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type ="text/css"><!--
.div1 {
  text-align : center;
  width: 100%;
  height: 100%;
  background-color: red;
}
.div2 {
  position : absolute;
  top : 50% ;
  left : 50% ;
  width : 536px ;
  height : 361px ;
  margin-top : -181px ;
  margin-left : -268px ;
  margin-right : auto ;
  margin-bottom : auto ;
  padding : 0;
  background-color: blue;
}
--></style>
</head>
<body>

<div class="div1">
<div class="div2">&nbsp;</div></div>

</body>
</html>
Avatar billede mik789 Nybegynder
21. januar 2003 - 16:56 #5
ups, ignorer det med "et billede som her" - det har jeg slettet her og bare vist dig det med to divs
Avatar billede knudgert Nybegynder
21. januar 2003 - 17:13 #6
Og min side, hvor mik789s kode er fra kan du se på
http://home13.inet.tele.dk/smedpark/test\centrer.htm
Avatar billede knudgert Nybegynder
21. januar 2003 - 17:13 #7
http://home13.inet.tele.dk/smedpark/test/centrer.htm
skal det være.
Avatar billede mik789 Nybegynder
21. januar 2003 - 17:22 #8
hovsa, der var nogle fejl. tjekkede lige selv. her er det rettet:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>centrering</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css"><!--

#div1 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 600px;
  height: 400px;
  margin-left: -300px;
  margin-top: -200px;
  background-color: red;
}
#div2 {
  position : absolute;
  top : 50% ;
  left : 50% ;
  width : 400px ;
  height : 200px ;
  margin-top : -100px ;
  margin-left : -200px ;
  background-color: blue;
}
--></style>
</head>
<body>

<div id="div1">
<div id="div2"></div></div>

</body>
</html>
Avatar billede mik789 Nybegynder
21. januar 2003 - 17:28 #9
knudgert> jeg ved faktisk ikke hvorfra jeg har det. Nogen lunde samme løsning flyder rundt på nettet i flere variationer. Uden billede fungerede det ikke rigtigt, så jeg ændrede koden i det sidste eksempel. Nogen lunde samme løsning har jeg set en anden komme med på eksperten i dag. Det er princippet der er det væsentlige. Under alle omstændigheder virker den sidste kode uden videre og opfylder det der spørges om: centrerer en div inde i en anden div.
Avatar billede knudgert Nybegynder
21. januar 2003 - 17:31 #10
Hvad skulle fejlen være i den første?

Den anden du postede centrerer ikke i Opera.

Og når du vælger at lave det som xhtml, så skal du huske at afslutte koderne, f.eks.
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
Avatar billede knudgert Nybegynder
21. januar 2003 - 17:39 #11
Det var bare fordi, du bruger nøjagttig samme størrelse i dit eksempel, som jeg gør, men du har da lov til at bruge det.
Avatar billede mik789 Nybegynder
21. januar 2003 - 17:41 #12
knudgert> den jeg først postede fungerer ikke i min browser, men jeg lavede også om på den kode jeg havde liggende. Den jeg sidst postede fungerer fint i IE og NS 6. Jeg har ikke selv Opera.

Vertikal centrering ER et problem, og der er flere løsninger, både med css og javascript. CSS løsningerne (også variationer af dem vi har her) er bl.a. samlet på http://bluerobot.com/

Javascript løsninger har tidligere været postet her af bl.a. pelkjaer. Jeg har dem hvis I er interesseret.
Avatar billede knudgert Nybegynder
21. januar 2003 - 17:51 #13
>mik789

Hvilken browser er det, den ikke fungerer på?
Og hvad med http://home13.inet.tele.dk/smedpark/test/centrer.htm fungerer den?
Hvis den ikke gør. så er det da rart at vide.
Avatar billede mik789 Nybegynder
21. januar 2003 - 18:19 #14
knudgert> jo dit link fungerer fint med toget centreret på siden. Jeg ved faktisk ikke hvorfor ovenstående ikke fungere hos mig. Det kan have været en tastefejl, jeg sad og puslede med det og slettede noget af den oprindelige kode. Sammenlignede så med andre løsninger jeg har liggende og nåede frem til det jeg postede til sidst.
Avatar billede daniel_d Nybegynder
21. januar 2003 - 19:05 #15
Som jeg lige kan se er der en fællesnævner for alle jeres løsninger, nemlig at man skal definere en fast størrelse på inner.div
Forklarede det måske ikke godt nok, men savner noget der kan tage størrelsen dynamisk (%) og ikke fast (px)
Avatar billede daniel_d Nybegynder
21. januar 2003 - 19:07 #16
pointen er at hvis man kan lave det dynamisk kan man angi den yderste div til at være width:100% og height:100% i stedet for en fast størrelse der så kun passer på en bestemt defineret div
Avatar billede daniel_d Nybegynder
21. januar 2003 - 19:54 #17
Ellers med andre ord. Det eller de script i er kommet med kan ikke løse mit problem. Det script jeg har nu kan det samme, men desværre er det bare ikke nok. :o(
Avatar billede mik789 Nybegynder
21. januar 2003 - 20:52 #18
du kan ikke centrere vertikal uden højde i px et eller andet sted
Avatar billede daniel_d Nybegynder
21. januar 2003 - 20:53 #19
heller ikke ved hjælp af et javascript ?
Avatar billede mik789 Nybegynder
21. januar 2003 - 20:57 #20
jeg har aldrig set det. jeg har flere javascript løsninger liggende, men ingen hvor den div der skal centreret, ikke er angivet i px
Avatar billede daniel_d Nybegynder
21. januar 2003 - 20:59 #21
Burde bare være muligt, når det er muligt horizontalt, hvorfor så ikke vertikalt...
Avatar billede mik789 Nybegynder
21. januar 2003 - 21:14 #22
fordi en web side læses oppefra og nedad. dvs. det er indholdet på siden der bestemmer højden af siden. procent skal være i procent af noget, og hvis ikke der er angivet noget i faste mål nogen steder kan der ikke tages procent af noget. horisontalt er det browservinduet der udgangspunktet. sådan tror jeg det er, men det er bare et gæt.
Avatar billede daniel_d Nybegynder
21. januar 2003 - 21:15 #23
jo, men hvis man nu kunne lave en funktion der fandt højden på browservinduet. Kunne man så ikke løse problemet ?
Avatar billede mik789 Nybegynder
21. januar 2003 - 22:51 #24
Ja, det må kunne lade sig gøre. Du kan skrive dit <div> tag ud dynamisk i javascript. Hvis f.eks. du vil angive div'ens højde som 50% af browservinduets højde kunne det se sådan ud. Der tages højde for IE i den første if-sætning, og for Netscape v.6+ i den anden:

<script type="text/javascript"><!--
if (document.all) {
document.write ('<div style="height: ' + document.body.clientHeight/2 + 'px;"/>');
} else if (document.getElementById!&document.all) {
document.write ('<div style="height: ' + innerHeight/2 + 'px;"/>');
}
//--></script>
Avatar billede mik789 Nybegynder
21. januar 2003 - 23:07 #25
hvor der er en fejl i linje 4. det skal være:

} else if (document.getElementById&!document.all) {

altså &! i stedet for !&
Avatar billede mik789 Nybegynder
21. januar 2003 - 23:10 #26
men så skal du samtidig bruge et script der reloader hver gang brugeren resizer
Avatar billede mik789 Nybegynder
21. januar 2003 - 23:50 #27
Her har du det:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript"><!--
function MyResize() {
self.location.reload();
}
self.onresize=MyResize;
//--></script>

<style type="text/css">
div {
  position : absolute;
  top : 50% ;
  left : 50% ;
  background-color: #ffcc00;
  border: 1px dotted #666666;
}
</style>

</head>

<body>

<script type="text/javascript"><!--
if (document.all) {
var IEw = document.body.clientWidth;
var IEh = document.body.clientHeight;
document.write ('<div style="height: ' + IEh/2 + 'px; width: ' + IEw/2 + 'px; margin-top: -' + IEh/4 + 'px; margin-left: -' + IEw/4 + 'px;"></div>');
} else if (document.getElementById&&!document.all) {
var NSw = innerWidth;
var NSh = innerHeight;
document.write ('<div style="height: ' + NSh/2 + 'px; width: ' + NSw/2 + 'px; margin-top: -' + NSh/4 + 'px; margin-left: -' + NSw/4 + 'px;"></div>');
}
//--></script>

</body>
</html>
Avatar billede mik789 Nybegynder
22. januar 2003 - 00:14 #28
Fandt dog lige ud af at det kun virker hvis du har xml-prologen med, dvs.:

<?xml version="1.0" encoding="iso-8859-1"?>

skal stå som allerførste linje. Derefter:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

og så skal <html> udvides med:

<html xmlns="http://www.w3.org/1999/xhtml">

Muligvis er det kun den første linje der er nødvendig. Hvis den mangler fungerer siden ikke og div'en mister sin højde. Spørg mig ikke hvorfor.
Avatar billede mik789 Nybegynder
23. januar 2003 - 00:23 #29
jeg ved ikke om du stadig hænger på, men jeg fandt ud af at for at dette skal virke skal du enten have både have xml prologen, dvs.:

<?xml version="1.0" encoding="iso-8859-1"?>

og doctype erklæringen med.

ELLER du skal droppe begge dele og bare starte lige på med <html>. Det sidste er måske ikke så korrekt, men er det sikreste. Jeg har tjekket i både IE+ og NS6+. Bemærk at jeg rettede endnu engang i else if sætningen. Den korrekte operator for "og ikke" er: &&!

Du kan se det i funktion på www.dahr.dk/Web/center_div.html

Div'ens dimensioner retter sig nu ind efter browservinduet. Du kan lægge din div ind i flere uden om. Princippet er det samme. Altså at skrive dele at div tag'et dynamisk med javascript hvor du angiver dine procenter som brøker af vinduets indre højde.
Avatar billede daniel_d Nybegynder
23. januar 2003 - 15:42 #30
Hej mik... Jeg er stadig på.
Det ser jo ikke helt tosset ud. Tjekkede lige i opera også, men den er ikke helt med på den. IE og netskod klarer den fint hos mig. (IE5.5 + NS7)

Jeg lader lige spørgsmålet stå åbent lidt endnu. Måske der kommer et par inputs på dit fine arbejde...

/mvh
Avatar billede mik789 Nybegynder
23. januar 2003 - 21:26 #31
fint, fint ;-)
/mik
Avatar billede daniel_d Nybegynder
26. januar 2003 - 20:48 #32
Ser ikke til at der kommer flere inputs..
Jeg takker for hjælpen mik

/mvh
Avatar billede mik789 Nybegynder
26. januar 2003 - 21:09 #33
helt ok!
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 14:55 Hente WordPad til Windows 11 Af Strawberry i Andet software
I går 11:37 Persits.Upload Af bsn i ASP
16/0918:13 oprette et installationsmedie Af Malm i Windows
16/0913:11 Adapterstik stik på ladekabel til USB-C Af ErikHg i Andet software
15/0911:19 Ios 27 iphone låst sim Af claes57 i Apps til iOS
White papers
Flere white papers »