Gruppen

Top Gruppen: Windows 7; Windows Vista; Windows XP; Textverarbeitung; Excel; DSL; Internet Browser; E-Mail/Outlook
Betriebsysteme: Windows classik; Linux; BS-Sonstige
Software: Datenbanken; Bildbearbeitung; Audio/mp3/Video; Security/Viren; SW-Sonstige
Hardware: Mainboard/CPU; Grafikkarten; Peripherie; Laptop/Notebook; HW-Sonstiges
Netzwerk: Telefon,ISDN,Modem; W-Lan; NW-Sonstiges
Programmierung: PHP,ASP,Perl...; Java,C++...; Webseiten/HTML
Sonstiges: PC-Sonstiges; Plauderecke; SN Intern; Test

/ Forum / Webseiten/HTML

Webseiten/HTML

Fragevon axelH. vom 26.01.2020, 14:40 Options

wie zentriere ich 4 div's, die ich mittels float:left nebeineinander gemacht habe?

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 schreiben

Antwort 1 von katy vom 26.01.2020, 19:04 Options

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

Antwort 2 von axelH. vom 26.01.2020, 20:23 Options

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.

Antwort 3 von katy vom 27.01.2020, 09:14 Options

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

Antwort 4 von axelH. vom 27.01.2020, 10:57 Options

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_ vom 27.01.2020, 11:28 Options

hallo axelH,

wie hast du das gemacht?
Bei mir funktioniert das nicht.

Manfred

Antwort 6 von katy vom 27.01.2020, 12:04 Options

Hallo abschweb,

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_ vom 27.01.2020, 17:14 Options

Hallo Katy,

jaja, das Zauberwort ist das text-align im <body>, dann funktionierts bei mir auch!

Danke,
Manfred

Hinweis

Diese Frage ist schon etwas älter, Sie können daher nicht mehr auf sie antworten. Sollte Ihre Frage noch nicht gelöst sein, stellen Sie einfach eine neue Frage im Forum..

Neue Einträge

Tipp einschicken

News einschicken