Problème de positionnement

Essrilenth Messages postés 1 Date d'inscription   Statut Membre Dernière intervention   -  
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   -
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 : 


<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:

1 réponse

Réponse 1 / 1
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   527
 
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 : 
<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,
0

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?
Raven -
Asta972155 -

10 réponses