Problème de positionnement
Essrilenth
Messages postés
1
Statut
Membre
-
Pitet Messages postés 2845 Statut Membre -
Pitet Messages postés 2845 Statut Membre -
Bonjour,
J'essayer de faire une page de garde pour un site web, composée d'une image à gauche, une a droite, et d'un bouton au milieu.
Mon HTML est ainsi :
Et mon CSS :
Seulement mon site ressemble à cela : http://hpics.li/ce7a12d
Le bouton "Commencer" n'est pas centré.
Merci d'avance ! :)
J'essayer de faire une page de garde pour un site web, composée d'une image à gauche, une a droite, et d'un bouton au milieu.
Mon HTML est ainsi :
<body>
<p>
<img id="homme" src="Images/Homme.png">
<div id="button">
<img src="Images/Commencer%20boutton.png">
</div>
<img id="femme" src="Images/Femme.png">
</p>
</body>
Et mon CSS :
body {
background-color: whitesmoke;
}
#homme {
float: left;
position: relative;
top: 6px;
}
#button {
display: inline-block;
margin-left: auto;
margin-right: auto;
}
#femme {
float: right;
position: relative;
top: 1px;
}
Seulement mon site ressemble à cela : http://hpics.li/ce7a12d
Le bouton "Commencer" n'est pas centré.
Merci d'avance ! :)
A voir également:
- Dans le document à télécharger, positionnez l'image dans le cadre gris. mettez un espace de 1 cm autour de l'image. comment se prénomme la personne recherchée ?
- Règle en cm sur téléphone - Guide
- Télécharger clavier arabe - Télécharger - Divers Web & Internet
- Espace insécable - Guide
- Comment reduire la taille d'un document - Guide
- Comment récupérer un document dans le presse-papier samsung - Guide
1 réponse
Salut,
Si tu position ton bouton en inline-block, le plus simple pour le centrer est d'appliquer un text-align: center sur son parent :
Bonne journée,
Si tu position ton bouton en inline-block, le plus simple pour le centrer est d'appliquer un text-align: center sur son parent :
<div class="text-center">
<img id="homme" src="Images/Homme.png">
<div id="button">
<img src="Images/Commencer%20boutton.png">
</div>
<img id="femme" src="Images/Femme.png">
</div>
body {
background-color: whitesmoke;
}
.text-center {
text-align: center;
}
#homme {
float: left;
position: relative;
top: 6px;
}
#button {
display: inline-block;
}
#femme {
float: right;
position: relative;
top: 1px;
}
Bonne journée,
