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

  1. #1
    Membre régulier
    Inscrit en
    Novembre 2005
    Messages
    194
    Détails du profil
    Informations forums :
    Inscription : Novembre 2005
    Messages : 194
    Points : 96
    Points
    96
    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 confirmé 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
    Points : 575
    Points
    575
    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 régulier
    Inscrit en
    Novembre 2005
    Messages
    194
    Détails du profil
    Informations forums :
    Inscription : Novembre 2005
    Messages : 194
    Points : 96
    Points
    96
    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 confirmé 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
    Points : 575
    Points
    575
    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 régulier
    Inscrit en
    Novembre 2005
    Messages
    194
    Détails du profil
    Informations forums :
    Inscription : Novembre 2005
    Messages : 194
    Points : 96
    Points
    96
    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 actif
    Avatar de Emyleen
    Femme Profil pro
    Webmaster
    Inscrit en
    Mars 2010
    Messages
    150
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 39
    Localisation : France, Aveyron (Midi Pyrénées)

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

    Informations forums :
    Inscription : Mars 2010
    Messages : 150
    Points : 230
    Points
    230
    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