Avatar billede stig69 Nybegynder
10. september 2008 - 22:29 Der er 9 kommentarer

centrering af div med float:left

Jeg vil meget gerne kunne centrere de tre div i den omkransede div. Er det muligt?

Mvh

Stig

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Float test</title>
<style type="text/css">
div.center {
  border:1px solid cyan;
  width:600px;
}
div.inner {
  float:left;
  width:100px;
}
.magenta { background:magenta }
.yellow { background:yellow }
.magenta { background:magenta }
</style>
</head>
<body>
<div class="center">
  <div class="inner magenta">thumbnail 1</div>
  <div class="inner yellow">thumbnail 2</div>
  <div class="inner magenta">thumbnail 3</div>
</div>
</body>
</html>
Avatar billede ssv Nybegynder
10. september 2008 - 22:36 #1
Sæt en margin: auto på din div.inner :-)
Avatar billede stig69 Nybegynder
10. september 2008 - 22:44 #2
nææ :-) har prøvet, funker ikke
Avatar billede ssv Nybegynder
10. september 2008 - 22:51 #3
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Titel</title>
<style type="text/css">
div.center {
  border:1px solid cyan;
  width:600px;
  margin: auto;
}
div.inner {
  float:left;
  width:100px;
}
.magenta { background:magenta }
.yellow { background:yellow }
.magenta { background:magenta }
</style>
</head>

<body>

<div class="center">
  <div class="inner magenta">thumbnail 1</div>
  <div class="inner yellow">thumbnail 2</div>
  <div class="inner magenta">thumbnail 3</div>
</div>

</body>
</html>

--

Fungerer altså fint :-)
Avatar billede ssv Nybegynder
10. september 2008 - 22:52 #4
Hov, jeg mente også margin: auto på din div.center i min første kommentar :-)
Avatar billede stig69 Nybegynder
10. september 2008 - 22:57 #5
Har du testet? Det er de tre små bokse som skal centreres inden i <div class="center"></div>
Avatar billede ssv Nybegynder
10. september 2008 - 23:29 #6
Det er vist mig der sidder og sover i timen her, jeg læste ikke lige helt hvad problemet var ;-)

Du kunne sætte en margin-left: 150px; i det her tilfælde på den første div. Jeg har ellers ikke lige en løsning på dit problem.
Avatar billede stig69 Nybegynder
10. september 2008 - 23:33 #7
De tre inderste bokse har ikke nogen fast bredde. De varierer afhængig af sprog... Det ender nok med en tabel - desværre.
Avatar billede roenving Novice
12. september 2008 - 00:07 #8
-- desværre ?-)

-- såvidt jeg forstår din problematik findes der ikke andre løsninger, og så må det vel være helt fint !-)
Avatar billede stig69 Nybegynder
12. september 2008 - 08:37 #9
Desværre er sagt fordi hele siden er opbygget uden tabeller.

Men en enkelt tabel er vel også ok

Lukker spørgsmålet
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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