HTML CSS Image n'centre?

Je suis en train d'essayer de centrer une image qui se trouve à l'intérieur d'un div, qui est alors situé à l'intérieur d'un autre div. Ne vous inquiétez pas, je vais poster un peu de code, donc vous pouvez voir ce que le diable, je veux parler ici.

HTML:

<div id="container">

    <div id="featureimage"  style="width: 845px">
        <img src="Stylesheets/images/globkey.jpg" alt="" />
    </div>

</div>

CSS:

body {
    background-color: #383838;
    margin: 0; padding: 0;
    font-size: small;
    color: #383838;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    }
* html body {
    font-size: x-small; /* for IE5/Win */
    font-size: small; /* for other IE versions */
    }

img {
    border-style: none;
}



/* Conatiner */ 
#container {
    background-color: #fff;
    width: 845px;
    margin: 0 auto;
    overflow: hidden;
    }


#featureimage{
    width: 620px;
    padding: 0 0 0 15px;
    margin: 20px 0;

/* I have also tried without padding and no margin!*/
    }   

#featureimage img{
    margin-left:50%;
    margin-right:50%;
    width:360px;
    height:360px;
    }

Je suis frais d'idées ici! Sur ce, pour toujours!

Merci pour toute aide,

Evan

OriginalL'auteur | 2011-08-16

29

Les Images sont des éléments en ligne, au centre, vous pouvez utiliser text-align: center; ou à display: block et définir margin: 0 auto;

6 secondes plus rapide que moi 😛
Cela a fonctionné. Je vous remercie.
mais pourquoi l'exemple fourni sur w3schools ne fonctionne pas pour centrer une image? w3schools.com/cssref/pr_class_float.asp

OriginalL'auteur
1

juste pour vous ajouter du texte-align: center pour votre #conteneur, puis ajouter margin: 20px auto; à votre featureImage. Si vous voulez img être centré à l'intérieur featureImage devrait fonctionner (featureImage héritera text-align: center).

Si vous faites cela, il va le centre de TOUT qui ne semble pas désiré, mais peut-être qu'il pourrait l'être.
mais il fonctionne aussi sous IE 🙂 je n'ai pas inventé c'est à dire, ne pas rejeter le blâme sur moi 🙂

OriginalL'auteur mkk
0
```
#featureimage{
    width: 620px;
    padding: 0 0 0 15px;
    margin: 20px 0;
    text-align:center;
}
```
êtes-vous essayer de définir text-align: center à l'image?
vous aurez besoin d'enlever le margin-left et margin-right à partir de cet exemple.
oups... mauvais élément. essayez que l'on
non 😛 était une faute de frappe
downvote? le mien fonctionne... jsfiddle.net/jmarikle/njCPU/1

OriginalL'auteur Joseph Marikle
0

Je voudrais essayer ce css:
```
#featureimage{
  width: 620px;
  padding: 0 0 0 15px;
  margin: 20px auto 0px auto;
  text-align: center;
}
```
Je suis peut-être complètement à côté sur celle-ci, que je n'ai pas testé.

OriginalL'auteur Oliver Spryn

je voudrais utiliser ce pour sûr, l'absolu; la gardera à cet endroit si vous souhaitez déplacer l'objet avec la page mettre fixe; mais d'autres que boom

#featureimage {
  width: "change this code to whatever expample..."   555px;
  height: "change this code to whatever example..."    96px;
  position: absolute;
  top: "change this to where ever it centers , you just have to mess with it.. example..." 960px;
  right: "same with this i had to put - to get it right as far as i could just play with it..."  -945px;
}

OriginalL'auteur jerry

0

Il peut également être résolu par de simples mettre un <center> tag:
```
<center>
<img src="abc.gif">
</center>
```
Mais la meilleure façon et html5 comme est, comme mentionné suivante:

définir dans le en-tête:
```
<style>
    img {
        display: block;
        margin-left: auto; 
        margin-right: auto;
    }
 </style>
```
De faire usage de cette classe dans le corps:
```
<img src="abc.gif" alt="abc" style="width: 90%; max-width: 300px;>
```
C'est tout. La dernière méthode est que recommandé par le w3c.

Le <center> balise est obsolète depuis plus d'un an. w3.org/TR/2010/WD-html5-20100304/obsolete.html Et obsolète bien avant.

OriginalL'auteur abu_bua
0

Selon votre condition de balisage de la structure, il suffit de la manière suivante:
```
img {
    display: block;
    margin: 0 auto;
}
```
Mais l'approche ci-dessus ne fonctionnera que si le conteneur contient une seule image. Bu si le conteneur contient plusieurs images, puis au-dessus de technique ne fonctionne plus alors de la manière suivante serait l'idéal:
```
#featureimage {
   text-align: center;
}
img {
    display: inline-block;
    vertical-align:top; //It is recommended when you use css property vertical-align
}
```
OriginalL'auteur Hanif
0

Utilisation:
```
margin: auto !important;
display: block;
```
Aussi essayez d'aller sur Play Store téléchargement de l'application du code HTML, il vous sera utile pour vous.

OriginalL'auteur user8691477

Vous devez vous connecter pour publier un commentaire.