63130
63130
Nov 10, 2008, updated at Nov 14, 2008 (UTC)
view7047
view9
0
Goto Top

Div Bereich vertikal Zentrieren

GermansolvedQuestionCSSDevelopment

Ich arbeite derzeit an einer Seite, für welche ich einen Div Bereich auf einer Seite zentrieren muss.

Hallo,

ich arbeite derzeit an einer Seite und habe dabei ein Problem: Der Inhalt der Seite soll zentriert werden. Der Inhalt steht in einem Div Bereich, welcher demnach sowohl horizontal als auch vertikal mittig auf der Seite stehen soll, egal bei welcher Auflösung.

Hier eine Vorschau wie es aktuell aussieht: http://www.tekstr.de/developer/helen

Und hier der Quelltext:
<html>

	<head>
		<title>Helen's Seite</title> 
		<link rel="stylesheet" type="text/css" href="style/style.css"> 
	</head>
	
	<body>
		<!-- Außenrand-->
		
		
		<div align="center" style="margin: 0 auto" > 
		<div
			align="center" 
			style=" 
			padding-left:50px;
			padding-right:170px;
			width:730px;
			height: 580px;
			border:1px solid black;
			margin: auto;"> 
		
		<!-- Innenrand-->
				<div style=" 
					width:639px;
					height: 364px;
					border:1px solid black;
					margin-top: 145px;
					padding-left: 50px;
					padding-right: 50px;
					padding-top: 20px;
					padding-bottom: 20px"> 
				Innenrand
				</div>
		
			Dies ist die äußere Box

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

</html>

Die oben im Quelltext erwähnte CSS Datei ist zur Zeit noch leer. Also wie kann ich den Div Bereich (Außenrand) vertikal zentrieren? Irgendeine Idee?

Vielen Dank schonmal

Grüße
Max aka v3rtico
comment-contentCommentShareShare
Share on Facebook Share on Twitter Share on Reddit Share on Linkedin

Content-Key: 101417

Url: https://administrator.de/contentid/101417

Printed on: April 24, 2024 at 16:04 o'clock

9 Comments
Latest comment
Goto Top
Member: bytecounter
bytecounter Nov 10, 2008 at 10:07:42 (UTC)
Goto Top
Hallo,

ich würde das wie folgt machen (ungetestet!):

...
  margin-top:50%;
  margin-bottom:50%;
  padding-top:-290px;
...

Du setzt den Nullpunkt in die Mitte und verschiebst dann den DIV um die Hälfte der DIV-Höhe nach oben. Setzt natürlich voraus, dass Du eine fixe Höhe hast.

vg
Bytecounter
Member: rittzrattz
rittzrattz Nov 10, 2008 at 10:36:58 (UTC)
Goto Top
Hi,

ich habe das auf einer Intranetseite so gelöst, indem ich eine Seite mit Frames gebaut habe, die die Seite mit dem Inhalt umschließen.

Frames sind zwar nicht mehr so ganz Zeitgemäß, aber es funktioniert.

Gruß
rittzrattz
Mitglied: 63130
63130 Nov 10, 2008 at 10:45:38 (UTC)
Goto Top
Das funktioniert leider nicht. Framesets möchte ich eher nicht verwenden.
Member: ITLocke
ITLocke Nov 10, 2008 at 11:59:47 (UTC)
Goto Top
Hallo evtl hilft dir dieser Link:

http://www.css4you.de/

Gruß

Locke
Member: Mitchell
Mitchell Nov 11, 2008 at 06:01:35 (UTC)
Goto Top
Hi Max,

wenn du bei jeder Auflösung eine Zentrierung erwirken willst, darfst du nicht mit Pixeln arbeiten. Da es relative Größen sind, nimm em:

<!-- Innenrand-->

 <div style="margin:5em 5em 5em 5em; width:639px; height: 364px; border:1px solid black;">  

     Innenrand
 </div>

Mfg

Mitchell

PS: Der Link oben funktioniert nicht mehr, die Datei ist nicht mehr da.
Member: ITLocke
ITLocke Nov 11, 2008 at 06:37:01 (UTC)
Goto Top
Zitat von @Mitchell:

PS: Der Link oben funktioniert nicht mehr, die Datei ist nicht mehr
da.

Hmm bei mir funktioniert er wunderbar...
Mitglied: 63130
63130 Nov 11, 2008 at 07:14:47 (UTC)
Goto Top
Stimmt ich habe den Ordner umbenannt, die neue Datei liegt in www.tekstr,de/developer/helen das hatte ich vergessen.
Member: Mitchell
Mitchell Nov 11, 2008 at 08:29:43 (UTC)
Goto Top
ich habe dann mal den Link oben für alle geändert, damit man direkt drauf zugreifen kann face-smile

Mfg

Mitchell

PS: Sieht gut aus die Seite ^^
Member: Mitchell
Mitchell Nov 14, 2008 at 06:13:23 (UTC)
Goto Top
wie siehts hier aus, schon Neuigkeiten?

Mfg

Mitchell
GermansolvedQuestionCSSDevelopment
Hotly discussed
gleixnerdCheck of ZFW Firewallgleixnerd - 5 CommentsjstrickerWireguard VPN on UDM Pro behind Fritzbox - Handshake did not completejstricker - 3 CommentsAlexWishaHow to set up and configure a Linux GRE tunnelAlexWisha - 3 Comments