Problème CSS : Z-index + Centrer img

Fermé

BesoinD'aide - 21 oct. 2011 à 13:36
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 - 21 oct. 2011 à 20:29

Bonjour,
Je cherche a centrer une image qui est mise à l'avant plan avec un z-index,
je n'arrive a afficher l'image avec le z-index que si celle-ci est en position:fixed;

voici mon code :

#home {
position:fixed;
left: 235px;
z-index:1;}
}

Je l'ai éloignée du bord a 235 pixels mais
je voudrais qu'elle s'adapte et reste toujours au centre de la fenêtre!
QUE FAIRE????????

MERCI !!!!!!!!!!!!

A voir également:

Problème CSS : Z-index + Centrer img
Enlever couleur lien css ✓ - Forum CSS
Mettre une image à gauche css ✓ - Forum CSS
Css exposant ✓ - Forum CSS
Déplacer une image css - Forum CSS
Css download - Télécharger - HTML

1 réponse

Réponse 1 / 1

Pepito One Messages postés 222 Date d'inscription jeudi 13 octobre 2011 Statut Membre Dernière intervention 8 novembre 2011 37
21 oct. 2011 à 14:32

Pourquoi utilises-tu ces propriétés pour placer ton image ?
En utilisant celle-ci, si tu veux, ton image "flotte" et n'est pas dépendante de, par exemple, un div. Tu ne pourras donc pas la centrer. Il faut que tu la mettes directement dans ta page html dans un <div align="center">.

arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
21 oct. 2011 à 20:29

Tu ne pourras donc pas la centrer.

Erreur!

En supposant pour mon exemple que l'image fait 200px de large:
HTML

<img src="image.jpg" alt="Image" id="image_test" />

CSS

img#image_test {
position:fixed;
left: 50%;
margin-left:-100px;
z-index:1;}
}

Le bord droit de l'image est placé à 50% de la largeur de l'écran.
Je décale ensuite l'image de la moitié de sa largeur (100px) pour compenser et donc la centrer dans le page.

Toutefois, si tu n'as rien d'autre dans ta page, il y a plus simple:
HTML

<div id="image_test">
<img src="image.jpg" alt="Image" />
</div>

CSS

div#image_test{
text-align:center;
}

Discussions similaires

[CSS] Forcé retour à la ligne

trait horizontal avec du css

HTML - définir taille bouton

[CSS] Mettre un objet au premier plan

Enlever le soulignement sous les liens en HTML/CSS

Discussions similaires

Newsletters