Supportnet / Forum / Webseiten/HTML
wie zentriere ich 4 div's, die ich mittels float:left nebeineinander gemacht habe?
Frage
wie zentriere ich 4 div's, die ich mittels float:left nebeineinander gemacht habe?
Mein erster Gedanke was, das ich diese 4 div's ein ein div packe und dieses dann zentriere. Das klappt aber leider nicht.
Antwort 1 von katy
Hallo axelH,
die Idee, ein umgebendes Element zu zentrieren wäre meiner Meinung nach schon ein sinnvoller Weg. Wie hast du denn zentriert?
Alternativ könntest du die 4 divs mit display:inline nebeneinander setzen und dann wie normale Inline-Elemente zentrieren.
katy
die Idee, ein umgebendes Element zu zentrieren wäre meiner Meinung nach schon ein sinnvoller Weg. Wie hast du denn zentriert?
Alternativ könntest du die 4 divs mit display:inline nebeneinander setzen und dann wie normale Inline-Elemente zentrieren.
katy
Antwort 2 von axelH.
Ich habe mit text-align:center; und margin: 0px auto; zentriert.
Könntest du das mit den inline-elementen bitte etwas genauer erklären? Das sagt mir nämlich leider gar nichts.
Könntest du das mit den inline-elementen bitte etwas genauer erklären? Das sagt mir nämlich leider gar nichts.
Antwort 3 von katy
Hallo axelH,
du kannst den Browser per CSS anweisen ein Blockelement, das normalerweise einen Absatz erzeugt (div, p, h1, ...) so darzustellen wie ein Inline-Element (img, span, ...). Inline-Elemente kannst du dann wie Text zentrieren. Alles weitere hier bei SelfHTML (wo sonst).
Einen schönen Sonntag wünscht
katy
du kannst den Browser per CSS anweisen ein Blockelement, das normalerweise einen Absatz erzeugt (div, p, h1, ...) so darzustellen wie ein Inline-Element (img, span, ...). Inline-Elemente kannst du dann wie Text zentrieren. Alles weitere hier bei SelfHTML (wo sonst).
Einen schönen Sonntag wünscht
katy
Antwort 4 von axelH.
habs jetzt hingekriegt. das mit den inline elementen hat zwar nicht geklappt, aber dafür hab ich dieses "4 div's ein ein div packe" noch mal überdacht und festgestellt, dass ich dem div, in das ich die 4 anderen gepackt habe, nur noch eine feste höhe und eine feste breite zuweisen musste.
Antwort 5 von _abschweb_
hallo axelH,
wie hast du das gemacht?
Bei mir funktioniert das nicht.
Manfred
wie hast du das gemacht?
Bei mir funktioniert das nicht.
Manfred
Antwort 6 von katy
Hallo abschweb,
das wird wohl ungefähr so aussehen:
text-align ist (seufz) nur für den IE notwendig.
katy
das wird wohl ungefähr so aussehen:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>test</title>
<style type="text/css">
html, body {
height : 100%;
text-align : center;
}
div#umhang {
margin : auto;
width : 70%;
border : thin solid red;
height : 3.1em;
}
div#umhang div {
width : 33%;
height : 3em;
float : left;
border : thin dotted blue;
}
</style>
</head>
<body>
<div id="umhang">
<div>1tes<br />DIV</div><div>2tes<br />DIV</div><div>3tes<br />DIV</div>
</div>
</body>
</html>text-align ist (seufz) nur für den IE notwendig.
katy
Antwort 7 von _abschweb_
Hallo Katy,
jaja, das Zauberwort ist das text-align im <body>, dann funktionierts bei mir auch!
Danke,
Manfred
jaja, das Zauberwort ist das text-align im <body>, dann funktionierts bei mir auch!
Danke,
Manfred