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 horizontalement un block avec un longueur variable


Sujet :

Centrer un élément en CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Inscrit en
    Novembre 2005
    Messages
    194
    Détails du profil
    Informations forums :
    Inscription : Novembre 2005
    Messages : 194
    Par défaut Centrer horizontalement un block avec un longueur variable
    Bonjour je n'arrive pas à centrer des div dans ce cas là, comment faire.

    bloc2 à un longueur variable
    bloc1 à une longueur variable
    bloc à une longueur fixe
    bloc0 est juste là pour le positionnement mais n'a aucune utilité

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <div id="bloc">
    	<div id="bloc0">
    		<div id="bloc1">A10</div>
    		<div id="bloc2">Brest Marseille Paris Lyon Nice Toulouse Lille Nancy(petit village)</div>
    	</div>
    </div>
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    #bloc {
    text-align: center;
    background-color: yellow;
    height: 37px;
    width: 616px;
    }
     
    #bloc0 {
    margin: 0 auto;
    /*width: 450px;*/ /*Si définit ça fonctionne sinon NON*/
    }
     
    #bloc1 {
    background-color: green;
    float: left;
    }
     
    #bloc2 {
    background-color: red;
    float: left;
    }
    j'ai tout essayé rien ne fonctionne
    Pouvez vous m'aiguiller?

    merci

  2. #2
    Membre éprouvé Avatar de oceane751
    Profil pro
    Intégrateur Web
    Inscrit en
    Novembre 2004
    Messages
    1 280
    Détails du profil
    Informations personnelles :
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Intégrateur Web

    Informations forums :
    Inscription : Novembre 2004
    Messages : 1 280
    Par défaut
    teste :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    #bloc {
    text-align: center;
    background-color: yellow;
    height: 37px;
    width: 616px;
    }
     
    .bloc0 {
    margin: 0 auto;
    /*width: 450px;*/ /*Si définit ça fonctionne sinon NON*/
    text-align: center;
    height: 20px;
    width: 616px;
    background-color:#0FC;
    }
     
    #bloc1 {
    background-color: green;
     
     
    }
     
    #bloc2 {
    background-color: red;
     
    }
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <div class="bloc0">
    		<span id="bloc1">A10</span>
    		<span id="bloc2">Brest Marseille Paris Lyon Nice Toulouse Lille Nancy(petit village)</span>
    	</div>

  3. #3
    Membre éclairé
    Inscrit en
    Novembre 2005
    Messages
    194
    Détails du profil
    Informations forums :
    Inscription : Novembre 2005
    Messages : 194
    Par défaut
    Oui mais là tu as transformé mes div en span

    Je nai pas la main sur bloc1 bloc2 et bloc0 je ne peux donc pas changer le type de balise, hélas.

  4. #4
    Membre éprouvé Avatar de oceane751
    Profil pro
    Intégrateur Web
    Inscrit en
    Novembre 2004
    Messages
    1 280
    Détails du profil
    Informations personnelles :
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Intégrateur Web

    Informations forums :
    Inscription : Novembre 2004
    Messages : 1 280
    Par défaut
    ah!!!
    tu n'as pas la main sur le css, et tu veux que ça marche?
    c'est méga moche quand même...

  5. #5
    Membre éclairé
    Inscrit en
    Novembre 2005
    Messages
    194
    Détails du profil
    Informations forums :
    Inscription : Novembre 2005
    Messages : 194
    Par défaut
    Pas la main sur le HTML qui est généré coté serveur. J'ai accès au css via la feuille de style.

    Il y a une solution avec du js évidemment mais c est dommage de devoir passer par js pour positionner des éléments

  6. #6
    Membre éprouvé
    Avatar de Emyleen
    Femme Profil pro
    Webmaster
    Inscrit en
    Mars 2010
    Messages
    151
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 40
    Localisation : France, Aveyron (Midi Pyrénées)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mars 2010
    Messages : 151
    Par défaut
    Il n'est pas possible de centrer un bloc sans taille. Il faut que ton bloc0 ai une width, si il n'en a pas, il prend toute la place de bloc et donc on ne voit pas qu'il est centré. Met lui une taille inférieure à la taille de ton bloc global et tu verras qu'il est centré

    Par défaut un bloc prend toute la place qu'il peut avoir dans le bloc qui le contient et non pas la taille des blocs qu'il contient.

Discussions similaires

  1. Centrer horizontalement un nombre n d'éléments 'block'
    Par BnA dans le forum Mise en page CSS
    Réponses: 9
    Dernier message: 04/12/2008, 16h29
  2. [PC] INSPECT avec variable de longueur variable
    Par Carlozi dans le forum Cobol
    Réponses: 6
    Dernier message: 22/10/2008, 18h32
  3. [FPDF] centrer un texte de longueur variable
    Par hacksi dans le forum Bibliothèques et frameworks
    Réponses: 1
    Dernier message: 06/02/2008, 13h19
  4. Réponses: 2
    Dernier message: 04/01/2008, 09h24
  5. Réponses: 1
    Dernier message: 20/11/2007, 15h12

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