Comment aligner verticalement une image dans une div

Le seul (et le meilleur de la croix-navigateur) façon que je sais, c'est d'utiliser un inline-block helper avec height: 100% et vertical-align: middle sur les deux éléments.

Alors il existe une solution: http://jsfiddle.net/kizu/4RPFa/4570/

CSS:

.frame {
height: 25px;      /* Equals maximum image height */
width: 160px;
border: 1px solid red;
white-space: nowrap; /* This is required unless you put the helper span closely near the img */
text-align: center;
margin: 1em 0;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
img {
background: #3A6F9A;
vertical-align: middle;
max-height: 25px;
max-width: 160px;
}

HTML:

<div class="frame">
<span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250px />
</div>
<div class="frame">
<span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25px />
</div>
<div class="frame">
<span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23px />
</div>
<div class="frame">
<span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21px />
</div>
<div class="frame">
<span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19px />
</div>
<div class="frame">
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" height=17px />
</div>
<div class="frame">
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" height=15px />
</div>
<div class="frame">
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" height=13px />
</div>
<div class="frame">
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" height=11px />
</div>
<div class="frame">
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" height=9px />
</div>
<div class="frame">
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" height=7px />
</div>
<div class="frame">
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" height=5px />
</div>
<div class="frame">
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" height=3px />
</div>

Ou, si vous ne voulez pas avoir un élément supplémentaire dans les navigateurs modernes et n'ont pas l'esprit à l'aide d'Internet Explorer les expressions, vous pouvez utiliser un pseudo-élément et l'ajouter à Internet Explorer à l'aide d'une expression pratique, qui s'exécute qu'une seule fois par élément, donc il n'y aura pas des problèmes de performances:

La solution avec :before et expression() pour Internet Explorer: http://jsfiddle.net/kizu/4RPFa/4571/

CSS:

.frame {
height: 25px;      /* Equals maximum image height */
width: 160px;
border: 1px solid red;
white-space: nowrap;
text-align: center;
margin: 1em 0;
}
.frame:before,
.frame_before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
img {
background: #3A6F9A;
vertical-align: middle;
max-height: 25px;
max-width: 160px;
}
/* Move this to conditional comments */
.frame {
list-style:none;
behavior: expression(
function(t){
t.insertAdjacentHTML('afterBegin','<span class="frame_before"></span>');
t.runtimeStyle.behavior = 'none';
}(this)
);
}

HTML:

<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=250px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=25px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=23px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=21px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=19px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=17px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=15px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=13px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=11px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=9px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=7px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=5px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=3px /></div>

---

Comment cela fonctionne:

1. Lorsque vous avez deux inline-block éléments à proximité les uns des autres, vous pouvez les aligner les uns à l'autre côté, donc, avec vertical-align: middle, vous obtiendrez quelque chose comme ceci:

   

2. Lorsque vous avez un bloc avec une hauteur fixe (en px, em ou d'autres absolue de l'unité), vous pouvez régler la hauteur des blocs intérieurs dans %.

3. Donc, l'ajout d'un inline-block avec height: 100% dans un bloc avec hauteur fixe permettrait d'aligner un autre inline-block élément (<img/> dans votre cas) à la verticale près d'elle.

matejkramny de la solution est un bon début, mais surdimensionné images ont un mauvais rapport.

Voici ma fourchette:

Démo: https://jsbin.com/lidebapomi/edit?html,css,sortie

---

HTML:

<div class="frame">
<img src="foo"/>
</div>

CSS:

.frame {
height: 160px; /* Can be anything */
width: 160px; /* Can be anything */
position: relative;
}
img {
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}

Un pur CSS solution:

http://jsfiddle.net/3MVPM/

Le CSS:

.frame {
margin: 1em 0;
height: 35px;
width: 160px;
border: 1px solid red;
position: relative;
}
img {
max-height: 25px;
max-width: 160px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background: #3A6F9A;
}

Clé trucs

//position: relative; - in .frame holds the absolute element within the frame
//top: 0; bottom: 0; left: 0; right: 0; - this is key for centering a component
//margin: auto; - centers the image horizontally & vertically

De cette façon, vous pouvez centrer une image à la verticale (démo):

div{
height: 150px; //Internet Explorer 7 fix
line-height: 150px;
}
img{
vertical-align: middle;
margin-bottom: 0.25em;
}

Vous pouvez essayer le réglage de la CSS de PI à display: table-cell; vertical-align: middle;

Vous pouvez essayer le code ci-dessous:

CSS:

.frame{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}

HTML:

<div class="frame" style="height: 25px;">
    <img src="http://jsfiddle.net/img/logo.png" />
</div>

Vous pourriez faire ceci:

Démo

http://jsfiddle.net/DZ8vW/1

CSS

.frame {
height: 25px;      /* Equals maximum image height */
line-height: 25px;
width: 160px;
border: 1px solid red;
text-align: center; 
margin: 1em 0;
position: relative; /* Changes here... */
}
img {
background: #3A6F9A;
max-height: 25px;
max-width: 160px;
top: 50%;           /* Here.. */
left: 50%;          /* Here... */
position: absolute; /* And here */
}    

JavaScript

$("img").each(function(){
this.style.marginTop = $(this).height() / -2 + "px";
})

D'essayer cette solution avec de la pure CSS http://jsfiddle.net/sandeep/4RPFa/72/

C'est peut-être le principal problème avec votre code HTML. Vous n'êtes pas à l'aide de guillemets lorsque vous définissez class & image height dans votre code HTML.

CSS:

.frame {
height: 25px;      /* Equals maximum image height */
width: 160px;
border: 1px solid red;
position: relative;
margin: 1em 0;
top: 50%;
text-align: center;
line-height: 24px;
margin-bottom: 20px;
}
img {
background: #3A6F9A;
vertical-align: middle;
line-height: 0;
margin: 0 auto;
max-height: 25px;
}

Quand je travaille avec les img tag, il en laissant 3 pixels à 2 pixels espace de top. Maintenant, je baisse line-height, et ça fonctionne.

CSS:

    .frame {
height: 25px;      /* Equals maximum image height */
width: 160px;
border: 1px solid red;
margin: 1em 0;
text-align: center;
line-height: 22px;
*:first-child+html line-height:24px; /* For Internet Explorer 7 */
}
img {
background: #3A6F9A;
vertical-align: middle;
line-height: 0;    
max-height: 25px;
max-width: 160px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
.frame {
line-height:20px; /* WebKit browsers */
}

La line-height propriété est rendue différemment dans les différents navigateurs. Donc, nous avons à définir les différents line-height propriété navigateurs.

Vérifier cet exemple: http://jsfiddle.net/sandeep/4be8t/11/

Vérifier cet exemple sur line-height différentes dans les différents navigateurs: entrée différences de hauteur dans Firefox et Chrome

Ma solution: http://jsfiddle.net/XNAj6/2/

<div class="container">
<div class="frame">
<img src="http://jsfiddle.net/img/logo.png" class="img" alt="" />
</div>
</div>
.container {
display: table;
float: left;
border: solid black 1px;
margin: 2px;
padding: 0;
background-color: black;
width: 150px;
height: 150px;
}
.frame {
display: table-cell;
text-align: center;
vertical-align: middle;
border-width: 0;
}
.img {
max-width: 150px;
max-height: 150px;
vertical-align: middle;
}

Un moyen facile qui fonctionnent pour moi:

img {
vertical-align: middle;
display: inline-block;
position: relative;
}

Il travaille pour Google Chrome très bien. Essayez celui-ci dans un autre navigateur.

Pour centrer une image à l'intérieur d'un conteneur (cela peut être un logo) en plus du texte comme ceci:

Fondamentalement, vous envelopper l'image

CSS:

.outer-frame {
border: 1px solid red;
min-height: 200px;
text-align: center; /* Only to align horizontally */
}
.wrapper{
line-height: 200px;
border: 2px dashed blue;
border-radius: 20px;
margin: 50px
}
img {
/* height: auto; */
vertical-align: middle;   /* Only to align vertically */
}

HTML:

<div class="outer-frame">
<div class="wrapper">
some text
<img src="http://via.placeholder.com/150x150">
</div>
</div>

À l'aide de table et table-cell méthode de faire le travail, spécialement parce que vous le ciblage de certains vieux navigateurs ainsi, j'ai créer un extrait de code pour vous que vous pouvez l'exécuter et vérifier le résultat:

CSS:

.wrapper {
position: relative;
display: table;
width: 300px;
height: 200px;
}
.inside {
vertical-align: middle;
display: table-cell;
}

HTML:

<div class="wrapper">
<div class="inside">
<p>Centre me please!!!</p>
</div>
<div class="inside">
<img src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" />
</div>
</div> 

Vous pouvez utiliser ceci:

 .loaderimage {
position: absolute;
top: 50%;
left: 50%;
width: 60px;
height: 60px;
margin-top: -30px; /* 50% of the height */
margin-left: -30px;
}

La meilleure solution est que

.block{
/* Decor */
padding:0 20px;
background: #666;
border: 2px solid #fff;
text-align: center;
/* Important */
min-height: 220px;
width: 260px;
white-space: nowrap;
}
.block:after{
content: '';
display: inline-block;
height: 220px; /* The same as min-height */
width: 1px;
overflow: hidden;
margin: 0 0 0 -5px;
vertical-align: middle;
}
.block span{
vertical-align: middle;
display: inline-block;
white-space: normal;
}

Voulez aligner une image qui après un texte /titre et les deux sont à l'intérieur d'un div?

Voir sur JSfiddle ou Exécuter du Code Extrait.

Juste être sûr d'avoir un ID ou une classe à l'ensemble de vos éléments (div, img, titre, etc.).

Pour moi fonctionne de cette solution sur tous les navigateurs (pour les appareils mobiles, vous devez adapter votre code: @media).

CSS:

h2.h2red {
color: red;
font-size: 14px;
}
.mydivclass {
margin-top: 30px;
display: block;
}
img.mydesiredclass {
margin-right: 10px;
display: block;
float: left; /* If you want to allign the text with an image on the same row */
width: 100px;
heght: 100px;
margin-top: -40px /* Change this value to adapt to your page */;
}

HTML:

<div class="mydivclass">
<br />
<img class="mydesiredclass" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Wikipedia-logo-v2-en.svg/2000px-Wikipedia-logo-v2-en.svg.png">
<h2 class="h2red">Text aligned after image inside a div by negative manipulate the img position</h2>
</div>

Juste pour le plaisir de ce être une réponse valable, je veux encore de post jQuery solution à nouveau. Cela fonctionne pour tout élément a de la v_align classe qui lui est appliqué. Il sera vertical centré dans le parent et sur le redimensionnement de la fenêtre, il sera recalculé.

Lien vers le JSFiddle

$(document).ready(function() {
//Define the class that vertically aligns stuff
var objects = '.v_align';
//initial setup
verticalAlign(objects);
//Register resize event listener
$(window).resize(function() {
verticalAlign(objects);
});
});
function verticalAlign(selector) {
$(selector).each(function(val) {
var parent_height = $(this).parent().height();
var dif = parent_height - $(this).height()
//Should only work if the parent is larger than the element
var margin_top = dif > 0 ? dif/2 : 0;
$(this).css("margin-top", margin_top + "px");
});
}

Vous pouvez utiliser un grid la mise en page à la verticale du centre de l'image.

.frame {
display: grid;
grid-template-areas: "."
"img"
"."
grid-template-rows: 1fr auto 1fr;
grid-template-columns: auto;
}
.frame img {
grid-area: img;
}

Cela va créer une 3 ligne 1 colonne de la grille de mise en page avec sans nom 1 fraction de large entretoises en haut et en bas, et une zone nommée img de auto hauteur (la taille du contenu).

La img va utiliser l'espace qu'il préfère, et les bagues en haut et en bas va exploiter le reste de la hauteur de la séparation en deux fractions égales, résultant dans la img élément à être centrée verticalement.

http://jsfiddle.net/Kissaki0/4RPFa/20713/