Wie zentriere ich Text oder Bild auf fester Größe von Div mit Css

Question

Ich habe eine div mit fester Höhe & Breite. In der div haben Bild mit unbekannt Höhe & Breite. Wie zentriere ich das Bild?

Beispiel http://jsfiddle.net/huhu/UyBNh/

Ich möchte die Ausgabe wie http://i.stack.imgur.com/8x9qH.gif

Answer 1

#center { 
    display:table-cell; 
    width:400px; 
    height:400px; 
    border:1px solid #444; 
    margin:auto; 
    vertical-align:middle; 
    text-align:center} 

Dies stellt die div wie eine Tabellenzelle behandelt werden, die hervorragende Unterstützung hat zum Zentrieren. Sie benötigen kein CSS für das Bild.

Answer 2

Sie sein werden den #center img Abschnitt aktualisieren möchten:

#center img { 
    position: relative; 
    left: 148px; 
    top: 148px; 
} 

Das Zentrum des Behälters 200px wäre. Wenn Sie das Bild um 52 Pixel versetzen, wird der Bildmittelpunkt auf die Mitte des Containers gesetzt.

Answer 3

Eine Option wäre die Verwendung von CSS. Sie können es inline stylen (wenn Sie aus der Datenbank ausgeben, ist dies manchmal der beste Weg). Oder weisen Sie es einer Klasse zu. So oder so:

background:url(http://i.stack.imgur.com/TW66h.png) 50% 50% no-repeat; 

http://jsfiddle.net/VTgWg/1/

Hier ist eine Demo unterschiedlicher Größe Bilder zeigt: http://jsfiddle.net/r2wm2/1/

Ich habe so gesehen Fälle, in denen Sie das Bild verknüpfen möchten. Hier ist ein Beispiel für die div für einen <a> Tag Austausch: http://jsfiddle.net/zSuzm/1/

Answer 4

Diese CSS arbeiten auf Ihrem Beispiel:

#center {width:400px; height:400px; border:1px solid #444; margin:auto; display: table-cell; vertical-align: middle;} 
#center img { margin:auto; display:block;}