Comment aligner verticalement une image à l'intérieur d'un div


1457

Comment pouvez-vous aligner une image à l'intérieur d'un contenant div?

Exemple

Dans mon exemple, je dois centrer verticalement le <img>dans le <div>avec class ="frame":

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

.frameLa hauteur de l'image est fixe et la hauteur de l'image est inconnue. Je peux ajouter de nouveaux éléments .framesi c'est la seule solution. J'essaye de faire ceci sur Internet Explorer 7 et plus tard, WebKit, Gecko.

Voir le jsfiddle ici .

.frame {
    height: 25px;      /* Equals maximum image height */
    line-height: 25px;
    width: 160px;
    border: 1px solid red;

    text-align: center;
    margin: 1em 0;
}
img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=250 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=25 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=23 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=21 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=19 />
</div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=17 />
</div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=15 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=13 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=11 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=9 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=7 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=5 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=3 />
 </div>


3
Bonjour, désolé, mais je ne suis pas d'accord sur l'utilisation d'une aide ici étant la solution la plus appréciée. Mais ce n'est pas le seul moyen. D'autres sont également pris en charge par les navigateurs. J'offre une solution ici sur stackoverflow.com/a/43308414/7733724 et W3C.org sur info. Vous pourriez vérifier. Santé
Sam

La lecture de l'article Centering Things sur le W3C sera utile: w3.org/Style/Examples/007/center.fr.html
QMaster

Réponses:


2128

Le seul moyen (et le meilleur cross-browser) que je connaisse est d'utiliser un inline-blockassistant avec height: 100%et vertical-align: middlesur les deux éléments.

Il existe donc une solution: http://jsfiddle.net/kizu/4RPFa/4570/

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

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


Comment ça fonctionne:

  1. Lorsque vous avez deux inline-blockéléments l'un à côté de l'autre, vous pouvez les aligner l'un de l'autre, vertical-align: middlevous obtiendrez donc quelque chose comme ceci:

    Deux blocs alignés

  2. Quand on a un bloc à hauteur fixe (en px, emou une autre unité absolue), on peut régler la hauteur des blocs intérieurs à %.

  3. Donc, en ajouter un inline-blockavec height: 100%dans un bloc à hauteur fixe alignerait un autre inline-blockélément à l'intérieur ( <img/>dans votre cas) verticalement près de lui.

2
Vous pouvez voir par vous-même: jsfiddle.net/kizu/Pw9NL - seules les boîtes en ligne ne génèrent pas de boîte, mais tous les autres cas fonctionnent bien.
kizu

3
Très bonne réponse. Je me débattais avec les espaces entre les éléments de bloc en ligne, c'est-à-dire entre .frameet .frame:before. Une solution proposée ici est d'ajouter margin-left: -4pxà .frame. J'espère que cela t'aides.
Mick

111
ATTENTION, le: <img src=""/>n'est PAS à l'intérieur de l' <span></span>assistant qui a été ajouté. C'est dehors. J'ai presque tiré toutes les mèches de mes cheveux en ne le réalisant pas.
ryan

50
Il semble que vous devez également ajouter "white-space: nowrap;" au cadre ou vous rencontrerez un problème si vous avez un saut de ligne entre votre image et la plage d'assistance. Il m'a fallu une heure pour que cette solution ne fonctionne pas pour moi.
juminoz

2
Dans mon cas, mon image avait max-height et max-width tous les deux réglés à 100% afin que l'image redimensionne le conteneur, et cette méthode n'a pas fonctionné. Ma solution était de changer ces valeurs à 90% (ce qui dans mon cas était correct; dans une autre situation, vous devrez peut-être mettre à l'échelle le conteneur en conséquence), et ajouter également une aide de l'autre côté de l'image afin que le rembourrage reste uniforme même sur des deux côtés.
Eric Dubé

513

Cela pourrait être utile:

div {
    position: relative;
    width: 200px;
    height: 200px;
}
img {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}
.image {
    min-height: 50px
}

74
Si vous souhaitez également aligner horizontalement l'image, ajoutez left: 0; à droite: 0; à img
jameskind

ce rly ne fonctionne-t-il pas dans IE10? Je l'utilise un peu partout
Max Yari

Fonctionne également (pour moi) avec conteneur div ayantposition:fixed;
PJ Brunet

1
Solution la plus simple et la plus propre merci!
KDT

Merci! A travaillé pour moi !!
Alexander Malygin

486

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

Voici ma fourchette:

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

Aperçu


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

Est-il possible d'adapter cela afin que vous puissiez zoomer sur l'image surdimensionnée, disons 2x, et qu'elle reste toujours centrée horizontalement et verticalement?
Justin

Si nous voulons le faire fonctionner pour l'alignement vertical du bas au lieu du milieu, quels codes devraient être modifiés?
bobo

1
@bobo vient de supprimer le top: 0;. Cela se traduit uniquement par bottom: 0;une application verticale.
jomo

La meilleure réponse!
user315338

278

Une solution à trois lignes:

position: relative;
top: 50%;
transform: translateY(-50%);

Cela s'applique à tout.

D' ici .


Préfixes: -ms- ou -webkit- (avant transformation). w3schools.com/cssref/css3_pr_transform.asp
Jorge Orpinel

3
Préfixes pour IE9, mais ne fonctionnant pas du tout dans IE8 et inférieur: caniuse.com/#search=transform Mais mon avis: je me fiche de IE8
Reign.85

Personne n'a remarqué ce qui se passe lorsque l'enfant à centrer est plus grand que l'écran de l'appareil et que le parent est le premier enfant dans DOM ...?
tao

3
Bien quand vous ne pouvez pas l'utiliser position: absolute;parce que vous avez besoin d'une largeur fluide.
plong0

2
Jusqu'à présent, la meilleure solution, encore meilleure que Flexbox, avec un support pour la plupart des navigateurs modernes et anciens. Votez pour cela s'il vous plaît
albanx

142

Une solution CSS pure :

.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;
}
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=250 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=25 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=23 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=21 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=19 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=17 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=15 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=13 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=11 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=9 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=7 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=5 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=3 />
</div>

Trucs clés

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

S'il vous plaît laissez-moi vous référer à un guide ici qui fonctionne même pour IE5 (en déduisant de ce que j'ai lu jusqu'à présent dans le post) webmasterworld.com/css/3350566.htm
Matej

cette solution est un bon début, mais les images surdimensionnées sont redimensionnées avec un mauvais rapport . Veuillez voir ma réponse.
jomo

@ HansWürstchen oui, mais le point est de centrer, si elle est surdimensionnée est un choix de conception. Ajouter plus de css = plus d'encombrement :)
Matej

1
@matejkramny, il ne devient pas surdimensionné. si l'image est surdimensionnée, elle a un mauvais rapport. cela signifie qu'il est étiré en hauteur et ne semble pas correctement.
jomo

✔ Wow, cela fonctionne avec des images débordantes (plus grandes que le wrapper), la réponse acceptée ne fonctionne pas.
Cedric Reichenbach

120

Pour une solution plus moderne, et s'il n'est pas nécessaire de prendre en charge les navigateurs hérités, vous pouvez le faire:

.frame {
    display: flex;
    /**
    Uncomment 'justify-content' below to center horizontally.
    ✪ Read below for a better way to center vertically and horizontally.
    **/

    /* justify-content: center; */
    align-items: center;
}

img {
    height: auto;

    /**
    ✪ To center this image both vertically and horizontally,
    in the .frame rule above comment the 'justify-content'
    and 'align-items' declarations,
    then  uncomment 'margin: auto;' below.
    **/

    /* margin: auto; */
}

/* Styling stuff not needed for demo */
.frame {
    max-width: 900px;
    height: 200px;
    margin: auto;
    background: #222;
}
p {
    max-width: 900px;
    margin: 20px auto 0;
}
img {
    width: 150px;
}
<div class="frame">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9988/hand-pointing.png">
</div>

Voici un stylo: http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e


3
Ceci est particulièrement utile si la hauteur du conteneur n'est pas définie
Dave Barnett

ou align-selfpour des articles individuels
Michael

Le problème align-selfest que les éléments flexibles étireront la hauteur du conteneur parent.
Ricardo Zea

101

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

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

4
Étrangement, je n'ai pas pu obtenir la réponse acceptée pour travailler dans ma situation (je recadrais également l'image avec débordement: caché). Cela a fonctionné parfaitement cependant.
Luca Spiller

3
Je n'ai testé cela que dans Chrome, mais la hauteur de ligne semble être la clé. J'ai mis l'attribut vertical-align sur le div plutôt que sur l'img, car mon img est à l'intérieur d'une ancre (<a/>).
Todd Price

1
Oui, beaucoup plus simple que la solution acceptée et fonctionne à merveille. J'ai également trouvé cette solution dans jsfiddle.
vdboor

1
Si vous savez quelles hauteurs prendre en charge, cela fonctionne plutôt bien
KrekkieD

De mon expierence cette solution ne fonctionne avec font-size: 0pour div. Pour les conteneurs assez gros, vous pouvez le manquer, mais si votre divest de 100 pixels et que votre img est de 80 pixels, il sera inférieur de quelques pixels.
alTus

38

Vous pouvez également utiliser Flexbox pour obtenir le résultat correct:

.parent {
  align-items: center; /* For vertical align */
  background: red;
  display: flex;
  height: 250px;
  /* justify-content: center; <- for horizontal align */
  width: 250px;
}
<div class="parent">
  <img class="child" src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" />
</div>


28

Il y a une solution super simple avec flexbox!

.frame {
    display: flex;
    align-items: center;
}

5
Oui, mais vous pouvez à peine le voir dans toutes les réponses. J'essayais de le mettre en évidence simplement et clairement car c'est une solution beaucoup plus facile que toutes les autres réponses.
BBlackwo

C'est la meilleure réponse qui a également fonctionné pour moi. Mais dans mon cas dans le cadre "inline-flex" a mieux fonctionné pour moi. et pour l'image à l'intérieur, j'ai ajouté: "vertical-align: middle".
Sophie Cooperman

22

Vous pouvez essayer de définir le CSS de PI sur display: table-cell; vertical-align: middle;


J'ai vu différentes méthodes, mais celle-ci était nouvelle (même en 2013) pour moi.
Mike Ebert

Mieux que de placer l'image à l'intérieur d'un tableau juste pour la centrer.
Jonats

3
affichage: la cellule de tableau ne taille pas toujours correctement si vous voulez que la largeur soit à 100%
Redtopia

1
Qu'est-ce que " PI"?
Peter Mortensen

18

Vous pouvez essayer le code ci-dessous:

.frame{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
<div class="frame" style="height: 25px;">
    <img src="http://jsfiddle.net/img/logo.png" />
</div>


14

Solution d'image d'arrière-plan

J'ai supprimé complètement l'élément image et je l'ai défini comme arrière-plan du div avec une classe de .frame

http://jsfiddle.net/URVKa/2/

Cela fonctionne au moins correctement sur Internet Explorer 8, Firefox 6 et Chrome 13.

J'ai vérifié et cette solution ne fonctionnera pas pour réduire les images de plus de 25 pixels de hauteur. Il y a une propriété appeléebackground-size qui définit la taille de l'élément, mais c'est CSS 3 qui entrerait en conflit avec les exigences d'Internet Explorer 7.

Je vous conseillerais de refaire les priorités et la conception de votre navigateur pour les meilleurs navigateurs disponibles, ou d'obtenir du code côté serveur pour redimensionner les images si vous souhaitez utiliser cette solution.


Très belle solution, mais je m'attends à ce que certaines images soient plus grandes que le conteneur, et dans ce cas, j'ai prévu d'utiliser max-height / max-width sur elles. Est-il possible de le faire avec des images d'arrière-plan?
Arnaud Le Blanc

ce n'est pas un "élément .frame", c'est un "div avec une classe de .frame"
JGallardo

Si la hauteur de l'image ne dépasse pas la hauteur de la div image, c'est la solution la meilleure et la plus simple ...
efirat

13

Imaginez que vous avez

<div class="wrap">
    <img src="#">
</div>

Et css:

.wrap {
    display: flex;
}
.wrap img {
    object-fit: contain;
}

Uau! Flex vraiment rulzzzz! Je vous remercie!
Pedro Ferreira

utilisez une couverture ajustée aux objets si vous voulez que l'enfant occupe toute la largeur du parent et soit toujours aligné verticalement au milieu. Voir css-tricks.com/snippets/css/a-guide-to-flexbox pour déplacer l'image dans le parent à l'aide de flex-box
mattdlockyer

11

Vous pouvez 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";
})

Agréable. Une chance pour une solution pure-css?
Arnaud Le Blanc

Malheureusement non, sauf si vous souhaitez utiliser des tableaux ou supprimer la compatibilité avec les anciennes versions d'IE. :( Si vous connaissiez la taille exacte des images à l'avance, ce serait différent, mais pas sans cela, ce n'est pas possible avec CSS seul.
Joseph Marikle

@Joseph Comment le corrigeriez-vous avec des tableaux?
Benjamin Udink ten Cate

@Benjamin Udink ten Cate C'est désordonné mais cela pourrait être fait de cette façon: jsfiddle.net/DZ8vW/2 (ce n'est pas conseillé, mais devrait fonctionner)
Joseph Marikle

1
Eh bien, il convient parfaitement aux besoins d'arnauds. Pas de JS, seulement CSS et HTML.
Benjamin Udink ten Cate

11

http://jsfiddle.net/MBs64/

.frame {
    height: 35px;      /* Equals maximum image height */
    width: 160px;
    border: 1px solid red;
    text-align: center;
    margin: 1em 0;
    display: table-cell;
    vertical-align: middle;
}
img {
    background: #3A6F9A;
    display: block;
    max-height: 35px;
    max-width: 160px;
}

La propriété clé est display: table-cell;pour .frame.Div.frameest affiché en ligne avec cela, vous devez donc l'envelopper dans un élément de bloc.

Cela fonctionne dans Firefox, Opera, Chrome, Safari et Internet Explorer 8 (et versions ultérieures).

MISE À JOUR

Pour Internet Explorer 7, nous devons ajouter une expression CSS:

*:first-child+html img {
    position: relative;
    top: expression((this.parentNode.clientHeight-this.clientHeight)/2+"px");
}

Génial. Un hack pour IE7 qui éviterait le javascript?
Arnaud Le Blanc

Je ne suis pas sûr, mais peut-être que les expressions CSS aideraient. Mais ils sont aussi en javascript. La seule différence, c'est que vous les écrivez dans des fichiers css, pas en js.
Webars

Oui, bonne idée. Ce serait plus gérable (le script s'exécute automatiquement selon les besoins), et comme il est censé être IE7, c'est ok.
Arnaud Le Blanc du

7

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

7

Cela fonctionne pour les navigateurs modernes (2016 au moment de l'édition) comme indiqué dans cette démo sur codepen

.frame {
    height: 25px;
    line-height: 25px;
    width: 160px;
    border: 1px solid #83A7D3;          
}
.frame img {
    background: #3A6F9A;
    display:inline-block;
    vertical-align: middle;
}

Il est très important de donner aux images une classe ou d'utiliser l'héritage pour cibler les images dont vous avez besoin centrées. Dans cet exemple, nous avons utilisé de .frame img {}sorte que seules les images enveloppées par un div avec une classe de .framesoient ciblées.


seulement ie7, juste mettre la hauteur de ligne: 25px;
anglimasS

1
il ne semble pas être correctement aligné même sur firefox et chrome ( jsfiddle.net/4RPFa/19 )
Arnaud Le Blanc

7

Essayez cette solution avec du CSS pur http://jsfiddle.net/sandeep/4RPFa/72/

C'est peut-être le principal problème avec votre code HTML. Vous n'utilisez pas de guillemets lorsque vous définissez c lass& image heightdans 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;
}

Lorsque je travaille avec la imgbalise, cela laisse 3 pixels à 2 pixels d'espace top. Maintenant je diminueline-height et ça marche.

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-heightpropriété est rendue différemment dans différents navigateurs. Nous devons donc définir différents line-heightnavigateurs de propriétés.

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

Vérifiez cet exemple sur line-heightles différents navigateurs: différences de hauteur d'entrée dans Firefox et Chrome


2
Ne fonctionne pas (au moins dans Firefox). Pour les citations manquantes, cela est autorisé en HTML5 (je ne sais pas cependant quel doctype est utilisé dans jsfiddle)
Arnaud Le Blanc

7

Je ne suis pas sûr d'Internet Explorer, mais sous Firefox et Chrome, si vous en avez un imgdans un divconteneur, le contenu CSS suivant devrait fonctionner. Du moins pour moi ça marche bien:

div.img-container {
    display: table-cell;
    vertical-align: middle;
    height: 450px;
    width: 490px;
}

div.img-container img {
    max-height: 450px;
    max-width: 490px;
}

IE8 +, malheureusement. Très bien pour moi, mais peut-être pas pour les autres.
TheCarver

notez également que display:table-cell;n'accepte pas le% comme largeurs
Mutmatt

7

Solution utilisant un tableau et des cellules de tableau

Parfois, il devrait être résolu en affichant sous forme de tableau / cellule de tableau. Par exemple, un écran de titre rapide. C'est également une méthode recommandée par W3. Je vous recommande de vérifier ce lien appelé Centrage d'un bloc ou d'une image de W3C.org.

Les conseils utilisés ici sont:

  • Conteneur de positionnement absolu affiché sous forme de tableau
  • Aligné verticalement pour centrer le contenu affiché sous forme de cellule de tableau

.container {
    position: absolute;
    display: table;
    width: 100%;
    height: 100%;
}
.content {
    display: table-cell;
    vertical-align: middle;
}
<div class="container">
  <div class="content">
    <h1 style="text-align:center">Peace in the world</h1>
 </div>
</div>

Personnellement, je ne suis pas d'accord sur l'utilisation des aides à cette fin.


6

Une manière simple qui fonctionne pour moi:

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

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


6

Pour centrer une image à l'intérieur d'un conteneur (il peut s'agir d'un logo) en plus d'un texte comme celui-ci:

Entrez la description de l'image ici

Fondamentalement, vous enveloppez l'image

.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 */
}
<div class="outer-frame">
  <div class="wrapper">
    some text
    <img src="http://via.placeholder.com/150x150">
  </div>
</div>


4

Si vous pouvez vivre avec des marges de la taille d'un pixel, ajoutez simplement font-size: 1px;à la .frame. Mais souvenez-vous que maintenant.frame 1em = 1px, ce qui signifie que vous devez également définir la marge en pixels.

http://jsfiddle.net/feeela/4RPFa/96/

Maintenant ce n'est plus centré sur Opera…


3

J'ai eu le même problème. Cela fonctionne pour moi:

<style type="text/css">
    div.parent {
        position: relative;
    }

    img.child {
        bottom: 0;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 0;
    }
</style>

<div class="parent">
    <img class="child">
</div>

en fait, la "position: fixe" sur l'image a fonctionné pour moi, où j'ai été frustré par les nombreuses fausses réponses de personnes suggérant la méthode des cellules de table qui ne fonctionnait pas plus près de mes travaux. Avec la méthode suggérée par algreat, vous n'avez pas besoin d'un récipient supplémentaire aussi.
Vasilios Paspalas

2

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

1

L'utilisation tableet la table-cellméthode font le travail, spécialement parce que vous ciblez également d'anciens navigateurs, je crée un extrait pour vous que vous pouvez exécuter et vérifier le résultat:

.wrapper {
  position: relative;
  display: table;
  width: 300px;
  height: 200px;
}

.inside {
  vertical-align: middle;
  display: table-cell;
}
<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> 


0

J'ai joué avec l'utilisation du rembourrage pour l'alignement central. Vous devrez définir la taille du conteneur externe de niveau supérieur, mais le conteneur interne doit être redimensionné et vous pouvez définir le remplissage à différentes valeurs de pourcentage.

jsfiddle

<div class='container'>
  <img src='image.jpg' />
</div>

.container {
  padding: 20%;
  background-color: blue;
}

img {
  width: 100%;
}

0

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

0

Utilisez celui-ci:

position: absolute;
top: calc(50% - 0.5em);
left: calc(50% - 0.5em);
line-height: 1em;

Et vous pouvez varier font-size.


0

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

Voir sur JSfiddle ou Run Code Snippet.

Assurez-vous simplement d'avoir un ID ou une classe sur tous vos éléments (div, img, title, etc.).

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

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 */;
}
<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>

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.