positionner une image au milieu

Je (débutant absolu) voudrais mettre une image dans une boîte avec un peu de marge autour. J'ai essayé avec rembourrage et ainsi, n'a pas fonctionné. Puis j'ai essayé ceci:positionner une image au milieu

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

Mais à la place, l'image reste bloquée dans le coin supérieur gauche.

Source

2009-08-11 Anonymous

Couple de façons de le faire:

Mon habitude est de définir une image d'arrière-plan à la place.

Dans votre css:

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

Dans votre code html:

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

Ou de mettre un peu de rembourrage autour de lui dans votre CSS

img#myImage { 
    padding: 20px; 
}

et le code HTML

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

Source

2009-08-11 12:48:29

Le la première suggestion n'est appropriée que s'il parle d'une sorte d'image décorative; Si c'est une image qui fait partie du contenu, ne le faites pas. La seconde serait probablement mieux faite avec des marges. –

Est allé avec rembourrage parce qu'il a dit qu'il a essayé cela. Mais vous avez raison, sur les deux comptes. –

CSS niveau 2 n'a pas de propriété pour centrer les objets verticalement. Il y en aura probablement un en CSS niveau 3. Mais même en CSS2 vous pouvez centrer les blocs verticalement, en combinant quelques propriétés. L'astuce consiste à spécifier que le bloc externe doit être formaté en tant que cellule de tableau, car le contenu d'une cellule de tableau peut être centré verticalement.

<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

Comme le suggère rpflo, en utilisant la propriété background-position est particulièrement grand si le conteneur arrive à être plus petit que l'image. N'oubliez pas d'inclure le style "background-repeat: none" si vous ne voulez pas que l'image soit carrelée.

Source

2009-08-11 12:53:09 Joshua

Gardez à l'esprit que plus tard dans l'affichage de votre vie css: table-cellule ne jouera pas bien avec d'autres styles (comme flottant). –

Je suis d'accord avec rpflo - pas une bonne solution. Les tables sont pour des tables et non pour la conception. – ChrisBenyamin

Essayez ceci:

<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>

Source

2009-08-11 12:57:08 ChrisBenyamin

Utilisez le plugin petit jQuery suivant. Il est centré l'image de chargement dans le milieu du conteneur spécifié (verticalement et horizontalement): http://plugins.jquery.com/project/CenterImage

site de démonstration: http://www.demosites.somee.com/demos/centerimage.html

Utilisation: Ce module positionne une image de chargement central sur un conteneur HTML spécifié (div, envergure...).

paramètres de configuration actuellement disponibles:

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

Configuration minimale pour l'initialisation:

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

Appelez ce, afin d'éliminer l'image de chargement (et la superposition)

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

Source

2011-06-15 09:47:20 Jovica

Notez que bien que cela puisse être une solution de travail, l'OP a marqué la question avec une balise CSS et non avec jQuery. – Artemix

positionner une image au milieu

Répondre

Questions connexes