Verticalement Centre Image Réactive

Il y a plusieurs façons de le faire - purement CSS ou JS-fondé de la méthode.

---

Mise à jour de réponse

Mise à jour: Avec l'avènement de la CSS transformer l'appui, voici une solution assez élégante pour le positionnement des éléments à l'aide de pur CSS. Avec le balisage:

<div class="container">
    <img src="..." alt="..." title="..." />
</div>

Pour votre CSS:

.container {
    /* The container has to have a predefined dimension though */
    position: relative;
}
.container img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

Mise À Jour JSFiddle

---

Vieille réponse

Pour le CSS, vous pouvez construire un fantôme élément dans le conteneur de la <img> élément. Chris Coyier ne une excellente écrire sur cette technique. Disons que votre code HTML ressemble à ceci:

<div class="container">
    <img src="..." alt="..." title="..." />
</div>

Alors votre CSS serait:

.container {
    font-size: 0;
    text-align: center;
}
.container:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.container > img {
    display: inline-block;
    vertical-align: middle;
}

Fonctionnelle CSS fix peut être vu travailler dans ce violon - http://jsfiddle.net/teddyrised/yawTb/8/

Ou, vous pouvez utiliser un JS basé sur la méthode:

$(document).ready(function() {
    $(window).resize(function() {
        $(".container > img").each(function() {
            var cHeight = $(this).parent(".container").height(),
                cWidth = $(this).parent(".container").width(),
                iHeight = $(this).height(),
                iWidth = $(this).width();

            $(this).css({
                top: 0.5*(cHeight - iHeight),
                left: 0.5*(cWidth - iWidth)
            });
        });
    }).resize();  //Fires resize event when document is first loaded
});

Mais vous devrez utiliser le code CSS suivant:

.container {
    position: relative;
}
.container img {
    position: absolute;
    z-index: 100;
}

[Edit]: Pour le JS méthode basée sur l'endroit où vous absolument position de l'élément d'image, vous aurez à indiquer les dimensions de la .container élément, ou certains contenus (mais ce genre de défaites le but parce que l'image sera au-dessus du contenu). C'est parce que l'élément de l'image a été retirée de la circulation des documents, et, par conséquent, ses dimensions ne sera pas affecter la taille du conteneur parent.

L'exemple de la JS version est ici - http://jsfiddle.net/teddyrised/yawTb/7/

OriginalL'auteur Terry

Donc, j'ai trouvé quelque chose qui fonctionne exactement comme je le voulais: http://jsfiddle.net/fmwzT/

Le problème est qu'il ne fonctionne qu'avec des fichiers d'amorce de la dernière version 2.3.1 et je n'ai aucune idée de pourquoi (j'ai 2.3.0 sur mon site).

Alors maintenant, j'ai répondu à ma question et soulève une question plus vaste encore, ce qui est à l'origine de ce travail?

Remarque, il utilise le code suivant:

HTML

<div id="f1"><div id="outer-element"><img id="inner-element" src="http://zx85.dyndns.org/raphtest/img/title.png" alt="Logo"></div></div>

CSS

#fl {
    float: left;
}

#outer-element {
    display: table-cell;
    vertical-align: middle;
    height: 40px;
    max-width: 300px;
}

#inner-element {
    display: inline-block;
    margin-left: -20px;
}

REMARQUE: Cela ne fonctionne PAS sans Bootstrap est neweste version 2.3.1.

Je vais poster une question pour voir si quelqu'un sait!

OriginalL'auteur Raphael Rafatpanah