Mehrere Bilder im DIV vertikal zentrieren ohne festen Angaben

notasquare · #1 (**permalink**) 25.03.2015, 09:09

Guten Morgen an alle,

zwar gibt es schon gefühlt 1000 Threads zu diesem Thema, aber leider hat mir nichts davon weitergeholfen.
Wie der Titel schon sagt - ich möchte mehrere Bilder (3 um genau zu sein) in einem DIV vertikal zentrieren.
Aber: Der Div hat keine feste Höhe / Breite, und auch die Bilder sollen sich bei kleineren Browserfenstern verkleinern.

Eine Lösung mit position:absolut kommt daher für mich nicht in Frage.
Die Ansätze mit display:table-cell; etc. etc. funktionieren leider irgendwie nicht.

Hier mein Code:

HTML-Code:

<div id="maincontainer">

<div id="photos_right">
    <img src="foto.jpg" />
    <img src="foto.jpg" />
    <img src="foto.jpg" />	
</div>

<div id="content">
</div>
</div>

Und hier mein CSS-Code:

Code:

#maincontainer {
	width: 60%;
	margin: 5% 20% 5% 20%;	
}

#photos_right{
	float: right;
	position:relative;
}

#photos_right img {
	width:100%;
	display:table-cell;
	vertical-align:middle;
	position:relative;
	text-align:center;
}

#content {
	width: 60%;
	margin-right: 10%;
}

Danke schon mal im Voraus und sonnige Grüße!

cloned · #2 (**permalink**) 25.03.2015, 09:21

Wie in den gefühlten 1000 Threads zu diesem Thema schon öfter gepostet:
Das sind deine Möglichkeiten, such dir aus, was dir passt und was für dich in Ordnung ist.

notasquare · #3 (**permalink**) 25.03.2015, 09:35

Tja, leider passt keine.

Es kommen genau 2 in Frage:

HTML-Code:

#photos_right {
  position: relative;
}
#photos_right img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Diese schließe ich wegen position: absolute; aus, außerdem klappt sie auch nicht.

2. Die Flexbox (welche ich ebenfalls bereits ausgetestet habe), die geht bei mir aber nur mit einer festen Höhe.

MrMurphy · #4 (**permalink**) 25.03.2015, 11:23

Hallo

Zitat:

2. Die Flexbox (welche ich ebenfalls bereits ausgetestet habe), die geht bei mir aber nur mit einer festen Höhe.

Dann machst du was falsch.

Gruss

MrMurphy

notasquare · #5 (**permalink**) 25.03.2015, 11:24

Habe gerade herausgefunden, dass es mein Fehler war, den darüber liegenden Container nicht auf auf "Flex" zu setzen.

Danke und BG

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
Bild in div vertikal zentrieren.	serum	CSS	2	01.02.2013 11:11
DIV Text vertikal zentrieren	andrej75	CSS	0	12.08.2009 14:14
ul in div zentrieren	MrMister	CSS	8	05.07.2009 22:52
joomla template entschlüsseln	nieselfriem	CSS	2	18.03.2008 13:12
Text in einem DIV vertikal mittig zentrieren	christoph	CSS	7	15.01.2007 12:07