✔ Bild in Div vertical und horizontal zentrieren

[Geflügel]

Hallo,
ich habe einen div-Layer mit 94px Höhe und 94px Breite.
Darin befindet sich nur EIN Bild. (img)
jetzt soll das Bild in diesem "Kasten" zentriert (horizontal) und zentriert (vertical) werden.

Ich habe es mit text-align: center; und vertical-align: middle; probiert, aber das klappt nicht.
margin: auto auto; geht auch nicht.

was habt ihr noch für Ideen?
Ich bin am verzweifeln.

 

[Gumbo]

Setze die Grafik doch einfach als Hintergrundgrafik ein:

background: url(…) no-repeat 50% 50%

 

[Geflügel]

Danke, das geht!
Und wie verlinke ich jetzt den GANZEN div-Layer?
ich habe

<a href="">&nbsp;</a> probiert,
aber dann entsteht so ein kleiner Strich und der ganze Layer ist nicht verlinkt. Danke schonmal!!

Ps.: der kleine Strich war nat. ein Unterstrich. Habe den mit text-deco: none; ausgestellt.
Das Problem mit "ganzen Layer verlinken" besteht aber noch.

 

[Gumbo]

Dann skaliere das a-Element einfach auf die benötigte Größe und setze die Hintergrundgrafik dort ein, etwa:

<a href="…" class="foobar"><span>Alternativtext</span></a>

.foobar {
	display: block;
	width: 94px;
	height: 94px;
}
.foobar span {
	display: none;
}

Alternativ könntest du natürlich auch einfach mit der Polstereigenschaft herumspielen.

 

[Rexo]

Wenn das div-Layer exakt die Größe behält und auch behalten soll, also kein dynamisches Verhalten hat, kannst du dir die Position doch direkt "ausrechnen".

Halbe Breite des div und davon die halbe Breite des Bildes subtrahiert, ist die "Verschiebung" des Bildes in horizontaler Richtung.
Das gleiche "Spiel" in vertikaler Richtung.
Dem div kein padding-Wert geben: padding: 0;
und das Bild mit:

position: relative;
top: y px;
left: x px;

verschieben, wobei x und y deine beiden "berechneten" Werte darstellen. Wenn das Bild aber keine direkte Bedeutung für die Webseite hat, also nur eine "grafische Verschönerung" sollte ein Bild immer als Hintergrundgrafik eingefügt sein.

Der Unterschied ist die Semantik einer Website.

Die Lösung von Gumbo funktioniert auch bei dynamischen div's.

 

[Geflügel]

Hat alles super geklappt, vielen Dank

 

[Maik]

Dann markiere bitte zukünftig solch "gelöste" Themen auch selbständig als erledigt.