CSS: Verticales Zentrieren

Webdesign & Technik HTML & CSS
1

Hi

Ich hab gerade, wie der Titel schon verrät, ein Problem mit der vertikalen Zentrierung. Ich habe drei div die jeweils ein Bild enthalten. Zwei davon enthalten ein kleineres Bild (#prev, #next) und werden links bzw. rechts gefloatet. Das dritte div enthält das große Bild (#picture) und soll zentriert werden.

Der Quelltext dazu:

[code]

[/code] Das CSS dazu: [code] body { width:800px; margin:20px auto; } #photos #next, #photos #prev { width:100px; height:100%; vertical-align:middle; } #photos #next { float:right; } #photos #picture { text-align:center; } #photos #prev { float:left; } [/code]

Derzeit sieht das ganze so aus.

Ich möchte jedoch, dass #prev und #next nicht ganz oben sind, sondern sich auf der Höhe von der Mitte des großen Bildes befinden.
Dazu habe ich für #prev und #next height:100% gesetzt und dann vertical-align:middle. Dadurch müsste ihr Höhe doch der des Elternelements #photos entsprechen, was jedoch nicht der Fall ist. Dadurch wirkt vertical-align natürlich auch nicht und die Bilder bleiben oben.

Wie kann ich diese beiden divs vertikal Zentrieren? :slight_smile:

2

Hi,

jaja, das alte Problem des vertikalen Zentrieren -.-

2 Moeglichkeiten die mir auf die schnelle einfallen:

-Tabellen (>.<), oder
-So etwas:

[code]

unbenannt body { width:800px; margin:20px auto; } #photos #next, #photos #prev { width:100px; vertical-align:middle; } #photos #picture { vertical-align: middle; } #photos { text-align:center; } 
<div id="photos">
		<img id="prev" src="test2_prev.png" />
		<img id="picture" src="test2_picture.png" />
		<img id="next" src="test2_next.png" />
</div>

[/code]

3 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" >

<head>
	<title>domain.com - About</title>
	<style type="text/css">
		#center {
			width: 600px;
			min-height: 200px;
			margin-left: auto;
			margin-right: auto;
		}
		#left {
			background-image: url(images/left.png);
			background-position: left center;
		}
		#right {
			background-image: url(images/right.png);
			background-position: right center;
		}
	</style>
</head>
<body>
	<div id="container">
		<div id="left">
		<div id="right">
		<div id="center">
			<!-- Center-Code here -->
		</div>
		</div>
		</div>
	</div>
</body>
</html>
4

@BnW
Thx, deine Version funktioniert.

@michi7x7
Würde zwar optisch das gleiche Ergebnis bringen, #prev und #next werden später jedoch zu Links werden. Da würde sich das gleiche Problem dann wieder stellen :smiley:

5

[quote=“aschachinger”]@michi7x7
Würde zwar optisch das gleiche Ergebnis bringen, #prev und #next werden später jedoch zu Links werden. Da würde sich das gleiche Problem dann wieder stellen :smiley:[/quote]
Da könntest du natürlich auch wieder problemlos mit text-align tricksen :wink:

6

Da hatte ich vor einigen Jahren auch schon einige Varianten
durchprobiert und dokumentiert:
hoffmann.bplaced.net/hilfe.php?m … sszentrier

Auch bei der Methode mit negativen margins, was ja andernorts
vielfach als problemfrei geschildert wird, konnte ich bei ein
paar browsern Probleme erkennen, schon weil in der Spezifikation
steht, daß man sich nicht darauf verlassen darf, daß browser
margin mit beliebigen negativen Werten interpretieren müssen.

Verwendet man mit display Tabelleneigenschaften, so gibt es
auch bei ein paar browsern Probleme.
Das ist immer eine mehr experimentelle Angelegenheit, die man
bei relevanten Inhalt wohl besser bleiben läßt.