vertikale Zentrierung eines <img> im <div>

Zergling-new · 26.05.2006, 12:06

hi,

sagt mal wie kann ich ein <img> - innerhalb eines <div>s fester Größe - vertikal zentrieren?

Code:

<div id="thumbnailContainer1" class="thumbnail alignment">
	[img]thumbnail.php?type=upload&amp;id=1&amp;rotate=0[/img]
</div>

Code:

div.thumbnail {
	background : #9FA9B3;
	border     : 1px solid black;
	height     : 150px;
	width      : 150px;
	text-align : center;
	vertical-align : middle;
	margin     : 0px 5px 10px 0px;
}

div.alignment {
	float : left;
}

vertical-align hat offenbar nur Auswirkungen auf Text

Kurioserweise hat text-align ja dafür aber Auswirkungen auf die horizontale Ausrichtung...grml

Ducky · 26.05.2006, 12:33

Verusch's mal mit dem Tag-Attribut: valign="top|middle|bottom"

Ich bin mir nicht sicher ob man es auf den <div>-Container anwenden kann,
sieht ersmal nicht danach aus.

Aber ein Ansatz der auf jeden Fall funktionieren würde wäre wenn
du immer eine feste Grösse/Höhe für das DIV verwendest entsprechend
das Bild mit Bild positionieren:

PHP-Code:

  <div

 id="thumbnailContainer1"

 class="thumbnail alignment">[img]leer.gif[/img][img]thumbnail.php?type=upload&amp;id=1&amp;rotate=0[/img]</div>

Zergling-new · 26.05.2006, 12:49

valign geht bei <div> nicht. spacer.gif's sind auch out, aber du hast natürlich recht, ich könnte dem Bild jedesmal ein eigenes padding zuweisen.

Wollte das eigentlich alles über die CSS Datei und dort über die Klassenzuweisung alignment regeln, damit man dort die Ausrichtung des Thumbs regeln kann und nicht noch im HTML-Code rumpfuschen muss.

Ging es nicht mal mit padding: auto? (so gehts leider nicht, aber irgendwas war mit auto)

imported_kremser · 26.05.2006, 12:58

ja mit valign fängt man bei div nix an!

hab das grad mal probiert - ist zwar nicht die schönste lösung aber es funzt

Code:

<style type="text/css">
  div { padding: 30%; }
</style>
<div align="center">
  test
</div>

bei 50% is es komischerweise nicht in der mitte ^^

[edit] getestet mit IE und Firefox [/edit]

Zergling-new · 26.05.2006, 13:16

Hm ne das sind ungenaue Lösungen.

50% ist logisch, dann ist die Bildoberkante bei 50%, aber ich will ja die Bildachse im Mittelpunkt haben.

Außerdem, wenn das Bild nur 2 Pixel kleiner als das <div> ist sind 30% ordentlich zuviel.

imported_kremser · 26.05.2006, 13:22

ja % is immer so ne sache..

sonst würd mir nur einfallen einen table ins div zu packen
und dann die zelle mit vertical-align middle und text-align center
in die mitte zu bringen

Zergling-new · 26.05.2006, 13:42

Tabellen zur Gestaltung sucken

Habe gerade das hier gefunden:
http://www.student.oulu.fi/~laurirai/www/css/middle/

display:table-cell;vertical-align:middle
das könnte es sein, leider benutze ich float:left
und dadurch scheints wieder nicht zu gehen.

Ich muss mir was anderes überlegen, trotzdem danke für eure Hilfe.

imported_kremser · 26.05.2006, 13:59

ja da hast du auch wieder recht

hey danke! das werd ich mir dann mal durchschauen!

hm also wenn das div immer gleich bleibt kï¿½nntest du eventuell das bild mit php horizontal und vertical zentrieren.. (ein neues daraus erstellen)
wï¿½re zwar unpraktisch wï¿½rde aber wenn man das bild nur ansieht nicht auffallen!

kein problem, man muss sich doch gegenseitig helfen

Zergling-new · 26.05.2006, 14:11

Ein neues Bild draus machen ist die unflexibelste Variante. Wenn ich
irgendwann in ferner Zukunft das Layout ändern wollte hätte ich überall in
den Thumbs einen Rand, der vielleicht nicht ins neue Layout passt.

Ich habe es mit individuellem margin-top gelöst. Mit der sagenhaften Formel:

PHP-Code:

  <?php

// $info = getimagesize(..);

if ($info[0] > $info[1]) { // width > height

    $factor  = THUMBNAIL_SIZE / $info[0];

    $padding = floor((THUMBNAIL_SIZE - ($factor * $info[1])) / 2);

} else {

    $padding = 0;

}

?>

Hm gefallen tut mir das aber auch nicht. Egal. Thema abgeschlossen.

imported_kremser · 26.05.2006, 14:16

warten wir mal ab... vielleicht gibt es dafür ja bald ne ablöse... wünschenswert wär es auf jeden fall!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Horizontale Scrollbar erscheint wenn Vertikale auftaucht	PsychoEagle	HTML, Usability und Barrierefreiheit	7	20.06.2006 08:54
css: <img> und <div>	flyingeagle	HTML, Usability und Barrierefreiheit	7	18.02.2005 15:35
vertiakle/horizontale Zentrierung im <div>		HTML, Usability und Barrierefreiheit	19	22.10.2004 22:20

26.05.2006, 12:06
Zergling-new Erfahrener Benutzer Registriert seit: 21.05.2008 Beiträge: 9.937	vertikale Zentrierung eines <img> im <div> hi, sagt mal wie kann ich ein <img> - innerhalb eines <div>s fester Größe - vertikal zentrieren? Code: <div id="thumbnailContainer1" class="thumbnail alignment"> [img]thumbnail.php?type=upload&id=1&rotate=0[/img] </div> Code: div.thumbnail { background : #9FA9B3; border : 1px solid black; height : 150px; width : 150px; text-align : center; vertical-align : middle; margin : 0px 5px 10px 0px; } div.alignment { float : left; } vertical-align hat offenbar nur Auswirkungen auf Text Kurioserweise hat text-align ja dafür aber Auswirkungen auf die horizontale Ausrichtung...grml


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

26.05.2006, 12:33
Ducky Neuer Benutzer Registriert seit: 14.03.2006 Beiträge: 24	Verusch's mal mit dem Tag-Attribut: valign="top\|middle\|bottom" Ich bin mir nicht sicher ob man es auf den <div>-Container anwenden kann, sieht ersmal nicht danach aus. Aber ein Ansatz der auf jeden Fall funktionieren würde wäre wenn du immer eine feste Grösse/Höhe für das DIV verwendest entsprechend das Bild mit Bild positionieren: PHP-Code: `<div id="thumbnailContainer1" class="thumbnail alignment">[img]leer.gif[/img][img]thumbnail.php?type=upload&id=1&rotate=0[/img]</div>`

26.05.2006, 12:49
Zergling-new Erfahrener Benutzer Registriert seit: 21.05.2008 Beiträge: 9.937	valign geht bei <div> nicht. spacer.gif's sind auch out, aber du hast natürlich recht, ich könnte dem Bild jedesmal ein eigenes padding zuweisen. Wollte das eigentlich alles über die CSS Datei und dort über die Klassenzuweisung alignment regeln, damit man dort die Ausrichtung des Thumbs regeln kann und nicht noch im HTML-Code rumpfuschen muss. Ging es nicht mal mit padding: auto? (so gehts leider nicht, aber irgendwas war mit auto)

26.05.2006, 12:58
imported_kremser Erfahrener Benutzer Registriert seit: 07.06.2005 Beiträge: 274	ja mit valign fängt man bei div nix an! hab das grad mal probiert - ist zwar nicht die schönste lösung aber es funzt Code: <style type="text/css"> div { padding: 30%; } </style> <div align="center"> test </div> bei 50% is es komischerweise nicht in der mitte ^^ [edit] getestet mit IE und Firefox [/edit]

26.05.2006, 13:16
Zergling-new Erfahrener Benutzer Registriert seit: 21.05.2008 Beiträge: 9.937	Hm ne das sind ungenaue Lösungen. 50% ist logisch, dann ist die Bildoberkante bei 50%, aber ich will ja die Bildachse im Mittelpunkt haben. Außerdem, wenn das Bild nur 2 Pixel kleiner als das <div> ist sind 30% ordentlich zuviel.

26.05.2006, 13:22
imported_kremser Erfahrener Benutzer Registriert seit: 07.06.2005 Beiträge: 274	ja % is immer so ne sache.. sonst würd mir nur einfallen einen table ins div zu packen und dann die zelle mit vertical-align middle und text-align center in die mitte zu bringen

26.05.2006, 13:42
Zergling-new Erfahrener Benutzer Registriert seit: 21.05.2008 Beiträge: 9.937	Tabellen zur Gestaltung sucken Habe gerade das hier gefunden: http://www.student.oulu.fi/~laurirai/www/css/middle/ display:table-cell;vertical-align:middle das könnte es sein, leider benutze ich float:left und dadurch scheints wieder nicht zu gehen. Ich muss mir was anderes überlegen, trotzdem danke für eure Hilfe.

26.05.2006, 13:59
imported_kremser Erfahrener Benutzer Registriert seit: 07.06.2005 Beiträge: 274	ja da hast du auch wieder recht hey danke! das werd ich mir dann mal durchschauen! hm also wenn das div immer gleich bleibt kï¿½nntest du eventuell das bild mit php horizontal und vertical zentrieren.. (ein neues daraus erstellen) wï¿½re zwar unpraktisch wï¿½rde aber wenn man das bild nur ansieht nicht auffallen! kein problem, man muss sich doch gegenseitig helfen

26.05.2006, 14:11
Zergling-new Erfahrener Benutzer Registriert seit: 21.05.2008 Beiträge: 9.937	Ein neues Bild draus machen ist die unflexibelste Variante. Wenn ich irgendwann in ferner Zukunft das Layout ändern wollte hätte ich überall in den Thumbs einen Rand, der vielleicht nicht ins neue Layout passt. Ich habe es mit individuellem margin-top gelöst. Mit der sagenhaften Formel: PHP-Code: `<?php // $info = getimagesize(..); if ($info[0] > $info[1]) { // width > height $factor = THUMBNAIL_SIZE / $info[0]; $padding = floor((THUMBNAIL_SIZE - ($factor * $info[1])) / 2); } else { $padding = 0; } ?>` Hm gefallen tut mir das aber auch nicht. Egal. Thema abgeschlossen.

26.05.2006, 14:16
imported_kremser Erfahrener Benutzer Registriert seit: 07.06.2005 Beiträge: 274	warten wir mal ab... vielleicht gibt es dafür ja bald ne ablöse... wünschenswert wär es auf jeden fall!