Flashforum - Die Community zu Adobe Flash, Flex AIR. Web Design und Inspiration.

mauri2006 · 05-05-2010, 21:42

Hallo Flasher,

wie kann ich Sachen, wie Texte oder Bilder oder was auch immer
Mittig (horizontal und vertikal) im Browser anzeigen lassen?

Liebe Grüße,
mauri2006

feivelmaus · 05-05-2010, 22:20

Ich weiß nicht, ob es die schönste Lösung ist, aber ich mach es immer so, Div Container via css:

HTML-Code:

position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -50px;
	margin-top: -50px;
	width: 100px;
	height: 100px;

funzt zumindest.

:: RK :: · 05-05-2010, 22:47

Ich denke, dass ist ne bessere Variante:

HTML-Code:

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style type="text/css">
			body {
				text-align: center;
			}			
			#container {
				background-color: #f00;
				width: 900px; /* Beispiel */
				height: 300px; /* Beispiel */
				margin: 0 auto;
				text-align: left;
			}
		</style>
	</head>
	<body>
		<div id="container">Hallo Welt</div>
	</body>
</html>

Edit:
achso, du willst auch vertikal zentrieren ... hmm, dann kenn ich auch keine andere Variante als die von feivelmaus.

:: RK :: · 05-05-2010, 23:00

Ok, hier ne Mischung aus meiner und feivelmaus's Varianten. Vorteile gibts bei der horizontalen Ausrichtung: verkleinert man den Browser soweit, dass ein horizontaler Scrollbalken erscheint, bleibt der gesamte Content sichtbar und wird nicht (wie bei feivelmaus's Variante) beschnitten.

HTML-Code:

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style type="text/css">
			body {
				text-align: center;
				padding: 0;
				margin: 0;
			}			
			#container {
				position: relative;
				top: 50%;
				border: 1px solid #000;
				background-color: #f00;
				width: 900px;
				height: 300px;
				margin: -150px auto; /* Werte für top und bottom müssen jeweils height/2 sein
				text-align: left;
			}
		</style>
	</head>
	<body>
		<div id="container">Hallo Welt</div>
	</body>
</html>

feivelmaus · 05-05-2010, 23:07

okok, ich geb mich geschlagen

Ich wollte ja auch nur einen Ansatz bieten

webxvideo · 06-05-2010, 13:03

Also ich nehme für vertikale Zentrierungen immer noch die gute alte Tabelle.
Das vertikale Positionieren mit Position: relative oder absolute hat nämlich einen grossen Nachteil:
Wenn das Browserfenster kleiner als der Container ist wird der Inhalt oben und links abgeschnitten und lässt sich auch nicht durch Scrollbars erreichen.
Da ja im Moment viele Netbooks mit recht kleiner Bildschirmen im Einsatz sind ist das nicht zu vernachlässigen.

Natürlich könnte man mit JavaScript da ein Workaround basteln, aber dann kann ich auch gleich mit JavaScript zentrieren.

Nico1994 · 23-05-2010, 16:28

ich verwende folgendes:

HTML-Code:

<html>

<head>

<style type="text/css">
#contentcenter	{
 
	width: 650px;
 
	position: absolute;
	left: 50%;
 
	margin-left: -325px;
	height: 400px;
	top: 50px;
</style>

</head>


<body style="background-image: url('asdasd.jpg'); background-repeat: no-repeat; background-color: #000000;">
 
<div id="contentcenter" 
 
 
style="background-image: url('asdasdsd.jpg'); background-repeat: no-repeat; text-align: left;">

</div>
</body>
</html>

richtsteiger · 25-05-2010, 15:18

Ohne Tabelle, funktioniert überall und setz ich auch selber ein:
shrink-to-fit and center

Sind zwar ein paar CSS-Hacks enthalten, dafür umgeht man aber den
unschönen Zustand, dass Content aus dem Viewport nach links und/oder oben
verschwindet, wenn das Fenster zu klein wird.

Mal 'nen kleines Beispiel, wo das "Shrink Wrapping" zum Einsatz kommt:
www.uebel-metallbildner.de

05-05-2010, 21:42	#1 (permalink)
mauri2006 Flasher Registriert seit: Oct 2007 Ort: Niedersachsen Beiträge: 505	Sachen Mittig im Browser? Hallo Flasher, wie kann ich Sachen, wie Texte oder Bilder oder was auch immer Mittig (horizontal und vertikal) im Browser anzeigen lassen? Liebe Grüße, mauri2006 __________________ Nützliches: Javascript-Detection \| Flash-Detection \| Java-Detection Allgemein: Meine Webseite \| Meine Fotogallerie (Auf's Eis gelegt) RIP agedoubleju

05-05-2010, 22:20	#2 (permalink)
feivelmaus Neuer User Registriert seit: Jun 2007 Ort: Berlin Beiträge: 1.178	Ich weiß nicht, ob es die schönste Lösung ist, aber ich mach es immer so, Div Container via css: HTML-Code: position: absolute; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px; width: 100px; height: 100px; funzt zumindest. __________________ Grüße, der Feivel Showcase

05-05-2010, 22:47	#3 (permalink)
:: RK :: Neuer User Registriert seit: Jan 2002 Ort: Umgebung Stuttgart Beiträge: 5.459	Ich denke, dass ist ne bessere Variante: HTML-Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body { text-align: center; } #container { background-color: #f00; width: 900px; /* Beispiel / height: 300px; / Beispiel / margin: 0 auto; text-align: left; } </style> </head> <body> <div id="container">Hallo Welt</div> </body> </html> Edit: achso, du willst auch vertikal zentrieren ... hmm, dann kenn ich auch keine andere Variante als die von feivelmaus. __________________ Das Glück im Leben hängt von den guten Gedanken ab, die man hat.* Easing_Equations / Flash Kontaktformular / FlashPlugin W3C konform / Nützliche Beiträge zu FAQs Geändert von :: RK :: (05-05-2010 um 22:52 Uhr)

05-05-2010, 23:00	#4 (permalink)
:: RK :: Neuer User Registriert seit: Jan 2002 Ort: Umgebung Stuttgart Beiträge: 5.459	Ok, hier ne Mischung aus meiner und feivelmaus's Varianten. Vorteile gibts bei der horizontalen Ausrichtung: verkleinert man den Browser soweit, dass ein horizontaler Scrollbalken erscheint, bleibt der gesamte Content sichtbar und wird nicht (wie bei feivelmaus's Variante) beschnitten. HTML-Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body { text-align: center; padding: 0; margin: 0; } #container { position: relative; top: 50%; border: 1px solid #000; background-color: #f00; width: 900px; height: 300px; margin: -150px auto; /* Werte für top und bottom müssen jeweils height/2 sein text-align: left; } </style> </head> <body> <div id="container">Hallo Welt</div> </body> </html> __________________ Das Glück im Leben hängt von den guten Gedanken ab, die man hat. Easing_Equations / Flash Kontaktformular / FlashPlugin W3C konform / Nützliche Beiträge zu FAQs

05-05-2010, 23:07	#5 (permalink)
feivelmaus Neuer User Registriert seit: Jun 2007 Ort: Berlin Beiträge: 1.178	okok, ich geb mich geschlagen Ich wollte ja auch nur einen Ansatz bieten __________________ Grüße, der Feivel Showcase

06-05-2010, 13:03	#6 (permalink)
webxvideo Neuer Benutzer Registriert seit: Nov 2003 Ort: berlin Beiträge: 899	Also ich nehme für vertikale Zentrierungen immer noch die gute alte Tabelle. Das vertikale Positionieren mit Position: relative oder absolute hat nämlich einen grossen Nachteil: Wenn das Browserfenster kleiner als der Container ist wird der Inhalt oben und links abgeschnitten und lässt sich auch nicht durch Scrollbars erreichen. Da ja im Moment viele Netbooks mit recht kleiner Bildschirmen im Einsatz sind ist das nicht zu vernachlässigen. Natürlich könnte man mit JavaScript da ein Workaround basteln, aber dann kann ich auch gleich mit JavaScript zentrieren. __________________ ° OutScout.org - camps for trekking people \| Partyspinne.de Geändert von webxvideo (06-05-2010 um 13:04 Uhr)

25-05-2010, 15:18	#8 (permalink)
richtsteiger nobody is perfect Registriert seit: Jul 2004 Ort: munich Beiträge: 874	Ohne Tabelle, funktioniert überall und setz ich auch selber ein: shrink-to-fit and center Sind zwar ein paar CSS-Hacks enthalten, dafür umgeht man aber den unschönen Zustand, dass Content aus dem Viewport nach links und/oder oben verschwindet, wenn das Fenster zu klein wird. Mal 'nen kleines Beispiel, wo das "Shrink Wrapping" zum Einsatz kommt: www.uebel-metallbildner.de __________________ XING

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Cs4 swf mittig bei jedem browser	maechtling	HTML und CSS	4	19-04-2010 16:09
Bild im Browser mittig	Flashdream	Flash Einsteiger	2	18-02-2008 14:16
Flash Mittig (im Browser)	groundhouse	Flash Einsteiger	6	27-08-2006 17:04
übergroßer Film mittig im Browser	Lousha	Flash MX 2004	12	26-06-2004 14:46
Film mittig im Browser positionieren	marc	Programmieren	1	22-03-2002 09:09