Grafiken mittig positionieren

Paule23 · 21.11.2011, 18:03

Guten Abend Community,

ich bin in letzter zeit dabei eine Homepage zu erstellen. Das Menu verläuft von oben links nach rechts, ist aber immer mittig (egal wie ich mit dem Mausrad scrolle).

Nun möchte ich mich an den Inhalt machen. Habe immer nur 1-2 Grafiken zu positionieren. Diese sollen unabhängig von der Auflösung auch immer mittig sein. Also sich gleichmäßig vom Rand "abstoßten", dass auf beiden Seiten gleich viel Rand ist.

So ist der Inhalt imemr Mittig unterm Menu. Wenn Nutzer eine andere Auflösung haben, soll dieser immernoch Mittig sein.

Könnt ihr mir irgendwie weiterhelfen?

Grüße

Paul

**xandros** · 21.11.2011, 18:28

Bild in ein Block-Level-Element verpacken, dann kannst du dieses ebenfalls ueber Align zentriert ausrichten.
Bspl:

Code:

<div style="text-align:center;"><img src="bild.png" alt="" /></div>

<div></div> ist dabei das Block-Level-Element.

Paule23 · 21.11.2011, 18:55

Danke!

und wenn ich 2 oder 3 grafiken habe, und alle sollen sich mittig anordnen?

Grüße

**xandros** · 21.11.2011, 18:57

Dann entweder jedes Bild in ein eigenes Block-Level-Element einpacken oder eben alle zusammen in eines! Dabei dann hinter jedem Bild das Zeilenumbruchzeichen bei Bedarf einfuegen....

Paule23 · 21.11.2011, 19:38

Hm, habs ausprobiert. Steht leider alles untereinander

<div style="text-align:center;"><img src="bild" alt="" /></div>
<div style="text-align:center;"><img src="bild" alt="" /></div>
<div style="text-align:center;"><img src="bild" alt="" /></div>

gruß

Danke für die Hilfe!

Robby1001 · 21.11.2011, 21:38

Wenn wir schon dabei sind:

Wie haben die Herren das hier geschafft?
News

Sitzt bomben fest in der Mitte. Nicht verschiebt sich bei anderer Auflösung oder beim scrollen. Das will ich auch!

Grüße

**xandros** · 22.11.2011, 14:26

@Paule23:
Dass deine Bilder untereinander stehen ist logisch. Du hast hier drei Blockelemente verwendet, die automatisch untereinander positioniert werden, wenn keinerlei andere Angaben fuer die Positionierung erfolgt.

Alternativ waere es auch so moeglich

Code:

<div style="text-align:center;"><img src="bild1" alt="" /><img src="bild2" alt="" /><img src="bild3" alt="" /></div>

oder auch

Code:

<div style="text-align:center;"><img src="bild1" alt="" />&nbsc;<img src="bild2" alt="" />&nbsc;<img src="bild3" alt="" /></div>

fuer die Darstellung von drei Bildern nebeneinander innerhalb eines zentrierten Block-Level-Elementes oder auch

Code:

<div style="text-align:center;"><img src="bild1" alt="" /><br /><img src="bild2" alt="" /><br /><img src="bild3" alt="" /></div>

fuer die Darstellung mehrerer Bilder untereinander innerhalb eines zentrierten Block-Level-Elementes.

@Robby: Schau dir doch den Seitenquelltext an!

Robby1001 · 22.11.2011, 20:07

Hey,

ja das ist mitm Mac gemacht. Das rall ich irgendwie nicht, was das WYGIWYS da gemacht hat :O

Gruß

Paule23 · 22.11.2011, 20:08

Supi, danke dir!

Probiers gleich aus!

hm, sind nur 2 Bilder untereinander! :/

**xandros** · 22.11.2011, 20:11

Womit das gemacht wurde ist reichlich egal! Der Quelltext steht da als HTML-Auszeichnung inkl. den Formatierungen!

Sie betrachten gerade: Grafiken mittig positionieren

homepage verschiebt sich bei anderer auflösung

bild mit div mittig auf der seite platzieren

html 2 bilder nebeneinander zentriert