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 :

Centrage texte et photo dans cellules


Sujet :

Centrer un élément en CSS

  1. #1
    Membre éprouvé

    Homme Profil pro
    Technicien
    Inscrit en
    Août 2013
    Messages
    437
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Technicien
    Secteur : Enseignement

    Informations forums :
    Inscription : Août 2013
    Messages : 437
    Points : 1 190
    Points
    1 190
    Par défaut Centrage texte et photo dans cellules
    Bonsoir

    J'ai un souci sur la mise en forme d'une page sur mon site. Je souhaite faire en sorte que dans 2 cellules côte à côte (l'une comportant un texte et l'autre une image) le texte soit aligné verticalement.
    J'ai mis le code suivant
    Code html : 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
    <table style="text-align: center;" border="0" width="100%" cellspacing="0" cellpadding="0">
    <tbody><tr valign="middle">
    <td rowspan="3" width="350">Cellule fusionnée</td>
    <td style="text-align: left;" valign="middle" width="500">Cellule 1</td>
    <td valign="middle" width="110"><img src="..." width="100" /></td>
    </tr>
    <tr valign="center">
    <td style="text-align: left;" width="500">Cellule 2</td>
    <td width="110"><img src="..." width="100" /></td>
    </tr>
    <tr valign="center">
    <td style="text-align: left;" width="500">Cellule 3</td>
    <td width="110"></td>
    </tr>
    </tbody>
    </table>
    J'ai beau mettre des valign partout, le texte de la 2eme colonne n'est pas centrée verticalement !
    Quelqu'un peut-il m'aider à résoudre ce problème ?
    Merci par avance
    [Nouveau] Envie de tracer des circuits électriques : essayez le package LaTeX CircuiTikZ

    Pour créer une belle table des matières sur LibreOffice - N'oubliez pas de consulter les FAQ en cas de question !

    Envie de se lancer dans l'aventure Arduino : allez faire un tour sur ce cours.


    Ma réponse vous a plu ? Un petit vote serait sympa

  2. #2
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    -> sujet déplacé dans le forum CSS.

    Tu utilises des attributs OBSOLETES depuis le siècle dernier (valign,...).

    1/ Je t'invite donc à mettre à jour tes connaissances sur les <table> :



    2/ Par défaut, les éléments sont centrés verticalement ( vertical-align:middle;) dans les cellules.
    Si ce n'est pas le cas, c'est qu'il doit y avoir une instruction vertical-align:top; quelque part dans le CSS existant.

  3. #3
    Membre éprouvé

    Homme Profil pro
    Technicien
    Inscrit en
    Août 2013
    Messages
    437
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Technicien
    Secteur : Enseignement

    Informations forums :
    Inscription : Août 2013
    Messages : 437
    Points : 1 190
    Points
    1 190
    Par défaut
    Bonjour

    Merci pour le lien que j'ai lu avec attention.

    Citation Envoyé par jreaux62 Voir le message
    2/ Par défaut, les éléments sont centrés verticalement ( vertical-align:middle;) dans les cellules.
    Si ce n'est pas le cas, c'est qu'il doit y avoir une instruction vertical-align:top; quelque part dans le CSS existant.
    Dans ce cas, comment je dois procéder pour changer les choses ? Je dois supprimer dans le CSS existant sur la page du site ?
    [Nouveau] Envie de tracer des circuits électriques : essayez le package LaTeX CircuiTikZ

    Pour créer une belle table des matières sur LibreOffice - N'oubliez pas de consulter les FAQ en cas de question !

    Envie de se lancer dans l'aventure Arduino : allez faire un tour sur ce cours.


    Ma réponse vous a plu ? Un petit vote serait sympa

  4. #4
    Invité
    Invité(e)
    Par défaut
    Sans voir plus de code ou une page en ligne, difficile à dire...

    Astuce :
    Sur ton navigateur, tu peux afficher le code et inspecter les éléments :
    • touche "F12" du clavier
    • Ou "clic-droit" sur l'élément -> "Inspecter l'élément"



    Regarde dans la colonne où s'affiche le CSS appliqué à l'élément, ainsi que le nom et la ligne du fichier CSS.

  5. #5
    Membre confirmé
    Avatar de Jacques Beauregard
    Homme Profil pro
    Développeur Java
    Inscrit en
    Mai 2015
    Messages
    231
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Développeur Java
    Secteur : Conseil

    Informations forums :
    Inscription : Mai 2015
    Messages : 231
    Points : 595
    Points
    595
    Par défaut
    Bonjour,

    Un code simple à titre d'exemple ( avec des dimensions aléatoires pour bien voir que l'alignement vertical est automatiquement effectué dans un <table>)

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <table style="text-align:center;">
        <tr>
            <td>ton texte</td>
            <td>ton image</td>       
        </tr>   
    </table>

    CSS :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    td{
        border:1px solid silver;
        width:200px;
        height:100px;
    }
    Le texte et l'image sont bien au centre de chaque <td>
    Il ne faut jamais prendre les gens pour des cons, mais il ne faut pas oublier qu'ils le sont...

    Le guide du débutant pour apprendre à programmer en Java - N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java

  6. #6
    Membre éprouvé

    Homme Profil pro
    Technicien
    Inscrit en
    Août 2013
    Messages
    437
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Technicien
    Secteur : Enseignement

    Informations forums :
    Inscription : Août 2013
    Messages : 437
    Points : 1 190
    Points
    1 190
    Par défaut
    La page en question est ici
    L'inspection de l'élément fait apparaître
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    vertical-align: baseline;
    dans style.css : 17
    Effectivement quand dans l'analyseur je désélectionne, le texte est centré mais cette modification n'est que temporaire.
    J'ai beau cherché dans mon style.css je ne vois pas cet élément d'alignement vertical.
    [Nouveau] Envie de tracer des circuits électriques : essayez le package LaTeX CircuiTikZ

    Pour créer une belle table des matières sur LibreOffice - N'oubliez pas de consulter les FAQ en cas de question !

    Envie de se lancer dans l'aventure Arduino : allez faire un tour sur ce cours.


    Ma réponse vous a plu ? Un petit vote serait sympa

  7. #7
    Invité
    Invité(e)
    Par défaut
    Le fichier est là : /wp-content/themes/twentyeleven/style.css
    à la ligne 17.

    Oups ! Par contre, la règle s’applique à beaucoup de balises !

    Il faut donc AJOUTER une règle spécifique pour tes tables :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    table, tbody, tfoot, thead, tr, th, td {
        vertical-align: middle; /* ou top, c'est bien aussi ;) */
    }
    style.css est modifiable via ton Admin WP.

  8. #8
    Membre éprouvé

    Homme Profil pro
    Technicien
    Inscrit en
    Août 2013
    Messages
    437
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Technicien
    Secteur : Enseignement

    Informations forums :
    Inscription : Août 2013
    Messages : 437
    Points : 1 190
    Points
    1 190
    Par défaut
    Merci beaucoup, tout fonctionne !
    [Nouveau] Envie de tracer des circuits électriques : essayez le package LaTeX CircuiTikZ

    Pour créer une belle table des matières sur LibreOffice - N'oubliez pas de consulter les FAQ en cas de question !

    Envie de se lancer dans l'aventure Arduino : allez faire un tour sur ce cours.


    Ma réponse vous a plu ? Un petit vote serait sympa

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

Discussions similaires

  1. Centrage texte et image dans cellules
    Par deGoer dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 25/07/2015, 15h47
  2. [XL-2010] Texte trop grand dans cellule
    Par antonysansh dans le forum Macros et VBA Excel
    Réponses: 8
    Dernier message: 05/06/2015, 13h15
  3. [XL-2007] Ecrire texte de fond dans cellule vide
    Par JulieD33 dans le forum Excel
    Réponses: 4
    Dernier message: 11/02/2015, 14h56
  4. [XL-2007] insérer photo dans cellule active
    Par manuseverine dans le forum Macros et VBA Excel
    Réponses: 5
    Dernier message: 28/08/2010, 18h55
  5. [CSS]problème centrage texte de bouton dans une boîte
    Par Aurelius dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 06/09/2005, 17h01

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