positionner une image dans le milieu

I (débutant) aimerais mettre une image dans une boîte avec un peu de marge autour de. J'ai essayé avec un rembourrage et donc, n'a pas fonctionné. Ensuite, j'ai essayé ceci:

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

Mais au lieu de cela, l'image est coincé dans le coin supérieur gauche.

InformationsquelleAutor | 2009-08-11
  1. 2

    Couple de façons de le faire:

    Mon habitude est de mettre une image de fond à 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 juste quelques rembourrage autour dans votre CSS

    img#myImage {
    padding: 20px;
}

    et le HTML

    <img id="myImage" src="images/myImage.png" />
    • La première suggestion est appropriée que si il parle de décoration image de quelque sorte; si c'est une image qui est en fait une partie du contenu, ne le faites pas. La deuxième serait probablement mieux fait, avec des marges de.
    • Suis allé avec rembourrage en cause, il a dit qu'il a essayé. Mais vous avez raison, sur les deux comptes.
    InformationsquelleAutor Ryan Florence
  2. 2

    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>
    InformationsquelleAutor ChrisBenyamin
  3. 2

    CSS niveau 2 n'ont pas de propriété pour le centrage des choses à la verticale. Il y aura probablement une en CSS niveau 3. Mais même dans CSS2 vous pouvez centre de blocs verticalement, par la combinaison de quelques propriétés. Le truc, c'est pour indiquer que le bloc externe doit être formaté comme une cellule de tableau, parce que le contenu d'une cellule de tableau peut être centrée 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>

    MODIFIER

    Comme rpflo l'indique, à l'aide de la propriété background-position est d'autant plus important si le conteneur arrive à être plus petit que l'image. N'oubliez pas d'inclure le "background-repeat:aucun" style si vous ne voulez pas l'image de mosaïque.

    • Gardez à l'esprit que plus tard dans votre css vie display:table-cell ne pas jouer gentiment avec d'autres styles (flottants).
    • Je suis d'accord avec rpflo - pas une bonne solution. Les Tables sont des Tables et pas pour le design.
    InformationsquelleAutor Joshua
  4. 1

    Utiliser le petit plugin jQuery. Il centre le chargement de l'image dans le milieu du conteneur (verticalement et horizontalement):
    http://plugins.jquery.com/project/CenterImage

    Site de démo:
    http://www.demosites.somee.com/demos/centerimage.html

    Utilisation: Ce plugin postes de chargement de l'image au centre sur un certain conteneur html (div, span,...).

    Actuellement paramètres de configuration 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" });

    Appeler ce, afin de supprimer le chargement de l'image (et la superposition) 

    $('.4th').CenterImage('remove');
    • Notez que cela peut être une solution de travail, l'OP a marqué à la question de la CSS de la balise et pas jQuery.
    InformationsquelleAutor Jovica