Position ein Bild in der Mitte

Ich (absoluter Anfänger) würde gerne ein Bild in eine Box mit einem kleinen Rand um setzen. Ich habe versucht mit Padding und so, hat nicht funktioniert. Dann habe ich das versucht:Position ein Bild in der Mitte

<div style="border:1px solid #CC6699; width:11em; height:5.5em;"> 
    <img style="align:center; width:10em; height:5em;" src="path"> 
</div>

Aber stattdessen wird das Bild in der oberen linken Ecke stecken.

Quelle

2009-08-11 Anonymous

paar Möglichkeiten, dies zu tun:

Meine üblich ist stattdessen ein Hintergrundbild zu setzen.

in Ihrem CSS:

div#img_container { 
    background: url(images/myImage.png) center center 
}

in Ihrem HTML:

<div id="img_container"></div>

Oder einfach nur etwas Padding setzen um es in Ihrem CSS

img#myImage { 
    padding: 20px; 
}

und der HTML-

<img id="myImage" src="images/myImage.png" />

Quelle

2009-08-11 12:48:29

Der entfernen Der erste Vorschlag ist nur angebracht, wenn er von einem dekorativen Bild spricht; Wenn es sich um ein Bild handelt, das tatsächlich Teil des Inhalts ist, tun Sie dies nicht. Die zweite wäre wahrscheinlich besser mit Margen gemacht. –

Ging mit Polsterung, weil er sagte, er hat das versucht. Aber Sie haben recht, auf beiden Konten. –

CSS Level 2 hat keine Eigenschaft, um Dinge vertikal zu zentrieren. Es wird wahrscheinlich eine in CSS Level 3 geben. Aber selbst in CSS2 können Sie Blöcke vertikal zentrieren, indem Sie einige Eigenschaften kombinieren. Der Trick besteht darin, festzulegen, dass der äußere Block als Tabellenzelle formatiert werden soll, da der Inhalt einer Tabellenzelle vertikal zentriert werden kann.

<div style="border:1px solid #CC6699; width:11em; height:5.5em;text-align:center;vertical-align:middle;display:table-cell;"> 
    <img style="width:10em; height:5em;" src="path"> 
</div>

EDIT

Wie rpflo schon sagt, ist die Eigenschaft background-position mit besonders groß, wenn der Behälter als das Bild kleiner sein geschieht. Denken Sie daran, den Stil "background-repeat: none" einzufügen, wenn das Bild nicht gekachelt werden soll.

Quelle

2009-08-11 12:53:09 Joshua

Beachten Sie, dass später in Ihrem CSS-Life-Display: Tisch-Zelle wird nicht gut mit anderen Stilen (wie Floaten) spielen. –

Ich stimme rpflo zu - keine gute Lösung. Tabellen sind für Tabellen und nicht für Design. – ChrisBenyamin

Try this:

<html> 
<head> 
<style> 
#wrap { 
width: 500px; 
text-align: center; 
} 
.pic { 
padding: 5px; 
border: 2px solid #000; 
} 
</style> 
</head> 
<body> 
<div id="wrap"> 
    <img src="logo.gif" class="pic"> 
</div> 
</body> 
</html>

Quelle

2009-08-11 12:57:08 ChrisBenyamin

Verwenden Sie die folgende kleine jQuery-Plugin. Es zentriert das Lade Bild in der Mitte des angegebenen Behälters (vertikal und horizontal): http://plugins.jquery.com/project/CenterImage

Demo site: http://www.demosites.somee.com/demos/centerimage.html

Usage: Dieses Modul positioniert eine Lade Bild zentral über einen bestimmten HTML-Container (div, Spanne...).

Derzeit verfügbare Konfigurationseinstellungen:

{ path: "../Images/ajax.gif", overlayColor: 'green', opacity: 0.2, zindex: 2000, isrelative:true }

Minimalkonfiguration für die Initialisierung:

$('.4th').CenterImage({ path: "../Images/ajax-bar.gif" });

Rufen Sie diese, um das Laden Bild (und das Overlay)

$('.4th').CenterImage('remove');

Quelle

2011-06-15 09:47:20 Jovica

Beachten Sie, dass dies zwar eine funktionierende Lösung ist, das OP jedoch die Frage mit einem CSS-Tag und nicht mit jQuery markiert hat. – Artemix

Position ein Bild in der Mitte

Antwort

Verwandte Themen