Comment faire un centre de l'image dans un div?

Mon code HTML ressemble à ceci:

<div class="ctn">
    <img src="some-img.jpg"/>
</div>

La ctn doit être d'une taille fixe, disons, 150*150.

Mais la taille des Dhceu peut plus grand ou plus petit: 200*50, 50*200, 50*50 etc.

Comment puis-je faire de l'image en forme dans le centre de la div ? L'image de la proportion ne doit pas être modifié.

====Mise à JOUR====
Oui, j'ai besoin des deux hori & centre vertical.

Horizontalement, verticalement ou les deux?
Oui, ce sera mieux.

OriginalL'auteur MrROY | 2013-05-29

  1. 15

    Vous pouvez ajouter des css, pour centrer l'image horizontalement et verticalement:

    DIV.ctn {
    min-height: 150px;
    min-width: 150px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: table-cell;
    vertical-align: middle }

    ...

    <div class="ctn">
    <img src="some-img.jpg"/>
</div>

    Edit: pour plus de détails voir: http://www.w3.org/Style/Examples/007/center.html

    cool, si elle a fonctionné pour moi, quand je l'ai enlevé 'display: table-cell' de la propriété.

    OriginalL'auteur noamik

  2. 4

    Essayez ce qui suit:

    text-align: center;    
display: table-cell;
vertical-align: middle;

    DÉMO

    Que seuls les centres horizontalement
    J'ai besoin vertical centré trop, merci !
    Mise à jour de réponse

    OriginalL'auteur Andy

  3. 1

    je pense que c'est votre réponse

    .container img { width: 100%;}
.container {display: table-cell;vertical-align: middle}

    http://jsfiddle.net/RUQAM/1/

    il s'adapte, dans le centre de votre taille fixe div, et les proportions de l'image sont pas changé.

    OriginalL'auteur Sharky

  4. 1

    EDIT: re-lecture, vous voulez la taille de l'image fixe.

    div.cnt {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    min-height: 150px;
    min-width: 150px;
}

    OriginalL'auteur n00dle

  5. 0

    La façon la plus simple devrait être :

    div.cnt {
    width: 150px;
    height: 150px;
}

<div class="ctn" style="background: url('some-img.jpg') 50% 50% no-repeat;">

</div>

    OriginalL'auteur Alexandre Lavoie

  6. 0

    Si le ctn doit être fixe, de la taille (ex: 150x150) et l'image doit être proporcional et pas plus grand que les div, c'est une solution:

    CSS

    .ctn{
    background-color:#F00;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    overflow:hidden;
    height:150px;
    width:150px;
}
.ctn div{
    display:table-cell;
    vertical-align: middle;
    text-align:center;
}
.ctn div img{
    width:150px;
}

    HTML

    <div class="ctn">
<div>
    <img src="url" />
</div>
</div>

    Cette façon de centrer la div dans le milieu de l'écran et l'image ne sera pas plus grand que 150x150 mais il restera dans son proporcionality.

    OriginalL'auteur zurfyx

  7. -4

    style="margin-let:auto; margin:droit:auto"

    également spécifier la largeur de l'image sinon cela ne fonctionnera pas

    OriginalL'auteur rajansoft1