IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Centrer 3 divs


Sujet :

Centrer un élément en CSS

  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Juin 2006
    Messages
    69
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Juin 2006
    Messages : 69
    Par défaut Centrer 3 divs
    Bonsoir, voici mon problème:

    J' ai un div avec 3 divs à l' intérieur, je veux centrer les 3 divs, y-a-t-il un moyen sans passer par un calcul de marges? J' ai essayé text-align:center avec display:inline sans succès.

    Merci d' avance.

  2. #2
    Membre chevronné Avatar de GihefBey
    Profil pro
    Inscrit en
    Avril 2006
    Messages
    366
    Détails du profil
    Informations personnelles :
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Avril 2006
    Messages : 366
    Par défaut
    Bonjour,

    Pour les anciens navigateurs ajoute

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    body {
      text-align : center;
    ...
    Ensuite, pour les autres, et si ton <div> conteneur a une largeur, ajoute

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    #bloc_conteneur {
      margin : 0 auto;  /* marges à 0 en haut et en bas 
                              et automatiques à gauche et à droite */
    ...

  3. #3
    Membre éclairé
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Octobre 2006
    Messages
    288
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine et Marne (Île de France)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Octobre 2006
    Messages : 288
    Par défaut
    Sibile, pourrais tu mettre ton code pour que l'on voie?
    Merci de lire les règles du forum et surtout celle là Message clair et précis.
    Evitons les ctrl c ctrl v => Ne sortons pas les codes de leur contexte sinon ça ne marche pas.

  4. #4
    Membre Expert
    Profil pro
    Inscrit en
    Mars 2002
    Messages
    1 132
    Détails du profil
    Informations personnelles :
    Âge : 53
    Localisation : France

    Informations forums :
    Inscription : Mars 2002
    Messages : 1 132
    Par défaut
    Tu n'es surement pas le premier à vouloir faire cela, d'autres ont probablement déjà rencontré ce problème...




    Regarde un peu la discussion suivante et en particulier ce message...

  5. #5
    Membre confirmé
    Profil pro
    Inscrit en
    Juin 2006
    Messages
    69
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Juin 2006
    Messages : 69
    Par défaut
    Excusez-moi je me suis absentée.
    Eh bien désolée mais ça ne fonctionne pas!! Je ne peux pas centrer 2 divs sans préciser de marges. Mon astuce consiste en créant un div conteneur à la bonne largeur et centré avec margin:0 auto; puis d' y insérer 2 divs ayant des marges gauches et droites adéquates.

    Ex:

    css

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    #conteneur {
    margin:0 auto;
    width:850px;
    }
     
    #gauche {
    width:400px;
    margin-right:25px;
    }
     
    #droite {
    width:400px;
    margin-left:25px;
    }
    xhtml:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <div id="conteneur">
    <div id="gauche">
    </div>
    <div id="droite">
    </div>
    Décidément pas toujours pratiques les css!

  6. #6
    Membre Expert Avatar de HiRoN
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2007
    Messages
    2 035
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Août 2007
    Messages : 2 035
    Par défaut
    Salut,

    Sur le dernier code :
    Enlever les marges de #gauche & #droite et les remplacer par float:left; & float:right; afin de "coller" les blocs sur les bords du div #conteneur ?
    Pensez à utiliser les ressources disponibles en Dev. Web :
    (x)HTML : Cours (X)HTML / FAQ (X)HTML
    CSS : Cours CSS / FAQ CSS / Galerie CSS
    Javascript : Cours / FAQ / Sources
    Mon site : Développeur Web Freelance

  7. #7
    Membre Expert Avatar de Erwan31
    Profil pro
    Inscrit en
    Février 2008
    Messages
    2 177
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2008
    Messages : 2 177
    Par défaut
    Citation Envoyé par HiRoN Voir le message
    Salut,

    Sur le dernier code :
    Enlever les marges de #gauche & #droite et les remplacer par float:left; & float:right; afin de "coller" les blocs sur les bords du div #conteneur ?
    +1 Tout simplement
    En oubliant pas d'ajouter un overflow:hidden sur le conteneur pour qu'il puisse englober ses enfants flottants.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Centrer un div
    Par Anduriel dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 19/01/2006, 23h19
  2. Centrer un div...
    Par Davboc dans le forum Balisage (X)HTML et validation W3C
    Réponses: 12
    Dernier message: 16/01/2006, 22h57
  3. Centrer la DIV
    Par SangKou dans le forum Balisage (X)HTML et validation W3C
    Réponses: 16
    Dernier message: 20/12/2005, 02h04
  4. [CSS][CrossBrowser] Centrer de divs
    Par francky356 dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 30/11/2005, 14h39
  5. Centrer une <div> en position fixe sous IE
    Par Jorus dans le forum Mise en page CSS
    Réponses: 8
    Dernier message: 23/09/2004, 15h29

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo