Besoin de centrer l'image dans une page Web via CSS

Je souhaite centrer une image dans une page à la fois verticalement et horizontalement, même lorsque le navigateur est redimensionné.Besoin de centrer l'image dans une page Web via CSS

Actuellement, j'utilise ce CSS:

.centeredImage { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    margin-top: -50px; 
    margin-left: -150px; 
}

Et ce HTML:

<img class="centeredImage" src="images/logo.png">

Il centre dans FF mais pas IE (centre de l'image est placée dans le coin supérieur gauche). Des idées?

-Robot

Source

2010-03-23 Robot

-vous "savez" la hauteur de l'image? – Jage

Oui, bien que, évidemment, la question de crédit supplémentaire est de savoir comment le faire génériquement pour n'importe quelle image. – Robot

Essayez d'utiliser ceci:

position: absolute

Source

2010-03-23 17:40:07 medium

Cela a fait l'affaire ... maintenant à essayer de le faire fonctionner pour n'importe quelle image en ajustant dynamiquement pour la largeur et la hauteur de l'image. – Robot

jquery vous aidera avec cela. – Tesserex

@Tesserex Depuis quand jQuery est-il considéré CSS? –

text-align:center; 

vertical-align:middle;

vertical-align

aurait dû prendre pour l'astuce

Source

2010-03-23 17:39:05

Notez que l'alignement de texte doit être appliqué au conteneur, pas à l'image. Aussi vertical-aligner ne fonctionne pas pour moi, en testant avec IE7. – Tesserex

Si les réponses fournies ne fonctionnent pas et/ou non cohérente chaque navigateur, vous pouvez donner un coup de feu:

http://andreaslagerkvist.com/jquery/center/

text-align:center;

devraient obtenir, cependant.

Source

2010-03-23 17:40:15 Kevin

Ce plugin jQuery a l'air fantastique, bien que j'utilise ExtJS, donc je dois voir si je peux le traduire. – Robot

Ahh, peut-être qu'un plugin équivalent existe. Pas familier avec ExtJS. – Kevin

IE a des problèmes avec position: fixed (avec un million d'autres choses), donc je déconseille si la compatibilité est importante.

Utilisez position: absolute si le conteneur ne doit pas faire défiler. Sinon, vous aurez besoin de js pour ajuster le haut et le gauche de votre image lorsque vous faites défiler.

text-align: center devrait fonctionner s'il est appliqué au conteneur de l'image, mais pas à l'image elle-même. Mais bien sûr, cela ne concerne que l'horizontale, pas verticale. vertical-align: middle ne fonctionne pas pour moi, même avec un conteneur assez grand.

Les marges automatiques ne fonctionnent pas dans IE, du moins lorsque je le teste.

Source

2010-03-23 17:42:57 Tesserex

position: travail absolu ... merci – Robot

clair: les deux; marge: auto;

Source

2010-03-23 18:16:23 TheDudeAbides

Solution:

.centeredImage { 
     position: absolute; 
     top: 50%; 
     left: 50%; 
     margin-top: image-height/2; 
     margin-left: image-width/2; 
    }

puisque vous avez mentionné:

margin-top: -50px; 
margin-left: -150px;

Et si son alignement correctement au centre puis la hauteur de votre image serait 50x2 = 100px; & largeur 150x2 = 300px;

Source

2012-02-17 16:55:37

Ceci est une façon délicate, mais cela fonctionne:

CSS:

html, body, #wrapper { 
    height:100%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    border: 0; 
} 
#wrapper td { 
    vertical-align: middle; 
    text-align: center; 
}

HTML:

<html> 
<body> 
    <table id="wrapper"> 
     <tr> 
     <td><img src="my_cool_image.png" alt="hello world" /></td> 
     </tr> 
    </table> 
</body> 
</html>

Source

2012-03-20 04:51:03 JuanZe

Je l'ai résolu de cette façon:

img.class-name{ 

    position: absolute; 
    margin: auto; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
}

Source

2013-05-24 08:04:34

Fonctionne dans les versions actuelles d'Opera, Chrome, Firefox et Safari. IE quelqu'un? – Johan

Oui, fonctionne également dans IE 11. – Zymotik

.image { 
    position: fixed; 
    margin: auto; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
}

Source

2014-05-23 12:50:55 user3668989

Je l'ai fait! Cette méthode est solide et fonctionne sur tous les principaux navigateurs.

style="position: fixed; margin: 0 50%; left: -850px; right: 0; top: 0; bottom: 0;"

J'ai simplement utilisé une gauche de la moitié de la largeur de l'image et puis à travers shunté en utilisant la marge. Fonctionne un régal :)

Source

2014-06-24 09:33:52 mattfrombox

Avez-vous essayé cela à différentes largeurs de fenêtres - c'est-à-dire réactif? – Ruskin

Il existe une méthode très simple, cross browser, redimensionnement automatique. Prendre une image avec une largeur de 200px. Prendre la moitié de la largeur puis procédez comme suit:

#imgcent1 { 
    left: calc (100% - 100px/2); 
    /*rest of code*/ 
    }

Assurez-vous qu'il est « espace blanc » pour éviter les nombres négatifs et positifs (mieux utiliser cette convention pour tous les opérandes). Il sera automatiquement redimensionné. Essayez-le et j'espère que le test sur d'autres navigateurs fera en sorte qu'il devienne la norme comme prévu.

Source

2014-08-27 13:13:25 hograham

Une seule image sur le web & réactif

Image de fond:

/image.png

CSS:

html, body { height: 100%; margin: 0px; } 

.bg-image { 
    width: 100%; 
    height: 100%; 
    background-image: url(image.png); 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: contain; 
    text-indent: -9999px; 
}

HTML:

<body> 
    <div class="bg-image">Some text not displayed</div> 
</body>

Source

2015-04-04 10:32:18 Jordi

KISS universel ("keep it simple et stupide") façon:

<p style="text-align: center;"> <img src="myImage.png" /></p>

Source

2017-07-12 09:14:28 berhauz

Besoin de centrer l'image dans une page Web via CSS

Répondre

Questions connexes