• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

vertical-align funktioniert nicht mit float

G

Gauner

Mitglied
Hallo!

Ich möchte gerne ein Bild in einem DIV vertikal und horizontal zentrieren. Ja, ich weiß, die alte Leier...

Aber mir stellt sich die Frage, warum das nicht mit Float funktioniert.

Mein Code:

HTML: 
.bilder {
display: table-cell;
border: 1px dashed #666;
margin-top: 10px;
margin-left: 8px;
margin-bottom: 5px;
text-align: center;
vertical-align: middle;
width: 180px;
height: 180px;
float: left;
}

Wenn ich "float: left;" unten wegnehme, funktioniert es einwandfrei. Ich kann es aber leider nicht rausnehmen, da es benötigt wird.

Hat jemand eine Lösung?

Ich benutze XHTML 1.0 Transitional.
 
Werbung:
Baue eine vollständiges Tabellengerüst mit css nach und floate das Element welches display: table; bekommt (wenn du float dann noch brauchst).
Auf keinen Fall darf die Zelle selber gefloatet werden.
 
Werbung:
threadi schrieb:
float wird dir folglich rein gar nichts bringen, wenn Du dieses Objekt zentrieren willst.
Zum Vergrößern anklicken....

Du, ganz so dumm bin ich nicht ;-)

neuroleptika schrieb:
Baue eine vollständiges Tabellengerüst mit css nach und floate das Element welches display: table; bekommt (wenn du float dann noch brauchst).
Auf keinen Fall darf die Zelle selber gefloatet werden.
Zum Vergrößern anklicken....

Die 4 Bilder sollen nebeneinander stehen, und das vertikal und horizontal zentriert. Ausrechnen kann ich das auf Pixel-Basis leider nicht, weil ich nicht im Voraus weiß, wie groß die Bilder werden, nur halt, wie groß maximal (180px).

Du sagst, die DIV-Tabelle floaten. Das wäre nicht prickelnd, weil ich dann ja für jedes Bild eine eigene Tabelle bräuchte... Deswegen hatte ich nur 4 Zellen gebraucht.

Aber wenn das nicht geht, muss ich umdenken.
 
Zeige mal deinen Versuch online.
Mit einer kompletten (css-)Tabelle werden die Karten neu gemischt. Floats könnten unnötig werden.
Zellen sind auch geeignet um Elemente nebeneinander darzustellen ( ab IE8 ).

Edit:
Welche Browser willst du zu welcher Darstellung denn bewegen?
 
Zuletzt bearbeitet:
Gauner schrieb:
Du, ganz so dumm bin ich nicht ;-)
Zum Vergrößern anklicken....

Das hätte ich auch nie angenommen. Aber wieso machst Du dann sowas?

Die 4 Bilder sollen nebeneinander stehen, und das vertikal und horizontal zentriert. Ausrechnen kann ich das auf Pixel-Basis leider nicht, weil ich nicht im Voraus weiß, wie groß die Bilder werden, nur halt, wie groß maximal (180px).
Zum Vergrößern anklicken....

Um Bilder nebeneinander zu setzen musst Du float verwenden. Um das ganze Gerüst jedoch zentrieren zu können, musst Du dieses mit einem Blockelement umgeben, welches das floating cleart und gleichzeitig zentriert wird.

Der Haken an der Sache: ohne feste Maße kannst Du sowas nicht zentrieren. Da hilft auch diese ominöse

DIV-Tabelle
Zum Vergrößern anklicken....

nicht.

Mein Tipp:
JavaScript verwenden um die Maße zu ermitteln und dann zu zentrieren.
ODER: wirklich eine Tabelle dafür missbrauchen. Ohne weitere Inhalte auf der Seite wäre es ja nicht so tragisch. Manchmal muss man pragmatisch vorgehen ;)
 
Werbung:
Werbung:
Vielen Dank für eure Hilfe! :)

Was mir eben mal so aufgefallen ist: Was spricht eigentlich dagegen, einfach das Bild in den Hintergrund zu stellen? :D

Code: 
	background-position: center;
	background-image: url(contestgrafiken/goldpokal.png);
	background-repeat: no-repeat;

Funzt wunderbar und kostet kaum Code. Was meint ihr dazu?

Ansonsten werde ich mir das mit der DIV-Tabelle mal zur Brust nehmen.

Vielen Dank noch mal, Hilfe weiß ich wirklich zu schätzen :)
 
Werbung:
Werbung:
Ich habe hier mal ein Beispiel, wie ich es gerne haben möchte:

HTML: 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bilder</title>
<style type="text/css">
<!--
.rahmen {
	border: 1px solid #000;
	height: 200px;
	width: 770px;
	background-image: url(contestgrafiken/bg.jpg);
	background-repeat: repeat;
}
.bilderrahmen {
	border: 1px dashed #999;
	height: 180px;
	width: 180px;
	float: left;
	margin-top: 10px;
	margin-left: 8px;
	margin-bottom: 10px;
}
-->
</style>
</head>

<body>

<div class="rahmen">

<div class="bilderrahmen"><img src="grafiken/_CIMG0085.JPG" width="134" height="80" /></div>
<div class="bilderrahmen"><img src="grafiken/_CIMG0086.JPG" width="118" height="154" /></div>
<div class="bilderrahmen"><img src="grafiken/_CIMG0087.JPG" width="152" height="180" /></div>
<div class="bilderrahmen"><img src="grafiken/_CIMG0088.JPG" width="50" height="74" /></div>

</div>

</body>
</html>

Mein Ziel ist es jetzt, die Bilder horizontal und vertikal im "bilderrahmen" (180x180px) zu zentrieren.

Wie gesagt, ständig umrechnen kann ich nicht, weil die Bilder immer verschieden groß sind. Der "bilderrahmen" bleibt allerdings immer 180 x 180 px.
 
Zuletzt bearbeitet:
Code: 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bilder</title>
<style type="text/css">
<!--
.rahmen {
[COLOR=darkred]    display: table;[/COLOR]
    border: 1px solid #000;
    height: 200px;
    width: 770px;
    background-image: url(contestgrafiken/bg.jpg);
    background-repeat: repeat;
    float: left;
 }
.bilderrahmen {
[COLOR=darkred]    display: table-cell;[/COLOR]
    border: 1px dashed #999;
    height: 180px;
    width: 180px;
    margin-top: 10px;
    margin-left: 8px;
    margin-bottom: 10px;
[COLOR=darkred]    vertical-align: middle;
    text-align: center;[/COLOR]
}

-->
</style>
</head>

<body>

<div class="rahmen">
[COLOR=darkred]<div style="display:table-row">[/COLOR]
<div class="bilderrahmen"><img src="grafiken/_CIMG0085.JPG" width="134" height="80" /></div>
<div class="bilderrahmen"><img src="grafiken/_CIMG0086.JPG" width="118" height="154" /></div>
<div class="bilderrahmen"><img src="grafiken/_CIMG0087.JPG" width="152" height="180" /></div>
<div class="bilderrahmen"><img src="grafiken/_CIMG0088.JPG" width="50" height="74" /></div>
[COLOR=darkred]</div>[/COLOR]
 
</div>

</body>
</html>
Rot markiert sind die Änderungen
 
Werbung:
Hi alogheo,

das sieht nicht übel aus! Aber in deinem Beispiel wird Höhe und Breite (180 x 180 px) des "bilderrahmen" ignoriert. Woran liegt das?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben