[Résolu] Centrer image

Bonjour à tous,

voici ceux à quoi je voudrais arriver:



pour cela j'ai mis l'image en background, que j'ai centré. Mon problème étant de faire en sorte que les liens (mon compte et modifier mes infos) restent à leur place quand je passe sur un écran plus grand. Jusqu'à présent mon code est le suivant, du coup les liens ne suivent pas la nouvelle position de l'image sur un écran plus grand:

section
{
height:100%;
background-image: url('Images/bureau.jpg');
background-repeat: no-repeat;
background-position: center center;
position:relative;
}

#compte
{
display: inline-block;
border: 2px solid white;
border-radius: 4px;
padding: 5px;
color: white; 
margin-top: 200px;
margin-left:240px;
}

Merci mais mon image doit apparaître dans sa totalité (c'est peut-être que je ne maîtrise pas assez bien ta proposition, j'ai bien tenté avec les % mais je n'ai pas réussi).

En fait ma question se résume à: comment centrer quelque chose verticalement et horizontalement? Je n'arrive à faire que l'un ou l'autre: pour la verticale je passe par du inline-block mais après pour l'horizontale je veux faire margin: auto, qui ne fonctionne pas avec du inline-block...
Modifié par aurore01 (21 May 2015 - 18:31)

"comment centrer quelque chose verticalement et horizontalement?"

Tu peux lui appliquer un position: absolute, un left de 50%, un top de 50% puis des margin-left et margin-top égales à la moitié de la largeur et de la hauteur de l'élément à centrer.

Par exemple :

img {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -400px; /* moitié de la largeur de l'image */
	margin-top: -300px; /* moitié de la hauteur de l'image */
}

Bonne continuation.
Modifié par thierry (22 May 2015 - 19:27)

Merci beaucoup!