Problème de positionnement

Fermé

Essrilenth Messages postés 1 Date d'inscription lundi 26 septembre 2016 Statut Membre Dernière intervention 26 septembre 2016 - 26 sept. 2016 à 07:19
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 - 26 sept. 2016 à 10:18

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:

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
Espace insécable word - Guide
Image iso - Guide
Site de telechargement - Accueil - Outils
Acronis true image - Télécharger - Sauvegarde

1 réponse

Réponse 1 / 1

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
Modifié par Pitet le 26/09/2016 à 10:18

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;
}

Discussions similaires