web-dev-qa-db-fra.com

comment mettre l'image au centre de la page html?

Duplicata possible:
Comment centrer div horizontalement et verticalement

J'ai besoin de mettre l'image au centre de la page html, à la fois verticale et horizontale ... j'ai essayé quelques trucs mais semble bien fonctionner. Pour obtenir l'alignement horizontal, j'ai utilisé <body style="text-align:center">

et cela fonctionne bien, mais que faire de l'alignement vertical?

cordialement

htmlcssvertical-alignment
14
Darko Rodic

Si:

X est la largeur de l'image,
Y est la hauteur de l'image,

ensuite:

img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -(X/2)px;
    margin-top: -(Y/2)px;
}

Mais gardez à l'esprit que cette solution n'est valable que si le seul élément de votre site sera cette image. Je suppose que c'est le cas ici.

L'utilisation de cette méthode vous offre l'avantage de la fluidité. Peu importe la taille (ou la petite) de l'écran de quelqu'un. L'image restera toujours au milieu.

22
Mateusz Kocz

Mettez votre image dans un conteneur div puis utilisez le CSS suivant (en changeant les dimensions pour l'adapter à votre image.

.imageContainer{
        position: absolute;
        width: 100px; /*the image width*/
        height: 100px; /*the image height*/
        left: 50%;
        top: 50%;
        margin-left: -50px; /*half the image width*/
        margin-top: -50px; /*half the image height*/
    }
9
Danny

Hé maintenant, vous pouvez donner à image de fond du corps

et définissez le background-position:center center;

comme ça

body{
background:url('../img/some.jpg') no-repeat center center;
min-height:100%;
}
2
Rohit Azad

Il existe un certain nombre d'options différentes, en fonction de l'effet exact recherché. Chris Coyier a fait un morceau juste de cette façon quand. À lire:

http://css-tricks.com/perfect-full-page-background-image/

1
Eamonn