Partage
  • Partager sur Facebook
  • Partager sur Twitter

Alignement de texte sur CSS3

Sujet résolu
    18 septembre 2017 à 18:39:56

    Bonjour,

    Je m'excuse par avance pour cette question qui a déjà été posée des milliers fois, mais je n'ai pas trouvé la réponse que je voulais dans la fonction "recherche" du forum.

    Je débute tout juste sur CSS3 et je travaille actuellement sur la mise en forme de mon CV.

    Il est demandé dans l'exercice d'aligner un élément de texte selon ses envies, ce que je ne parviens pas à faire. En relisant mon cours, il est indiqué que la fonction "text-align" ne fonctionne que "sur des balises de type block (<p>,<div>,<h1>,<h2>, …") et non pas sur des balises inline type span, strong, etc. 

    Le problème est que ma page contient de multiple paragraphes, et que même si je place la phrase que je veux aligner au sein d'un paragraphe que je renommerais avec une balise class, cela ne marche pas.

    Et quand je ne donne aucun nom au paragraphe, ça ne marche pas non plus car ce n'est pas celui que je cible.

    J'espère avoir été suffisamment claire, et je remercie ceux qui voudront bien m'éclairer.

    -
    Edité par Ines Bela 18 septembre 2017 à 18:40:20

    • Partager sur Facebook
    • Partager sur Twitter
      18 septembre 2017 à 19:44:42

      Bonsoir,

      Te serrait il possible de nous poser ton code HTML/CSS ?

      Parce que là pour moi question clarté lol

      • Partager sur Facebook
      • Partager sur Twitter

      Compos sui.

        19 septembre 2017 à 11:24:06

        Bonjour,

        Merci pour ta réponse, et désolée si ma question n'était pas claire.

        Voici un extrait de mon CV en code html :

        -------------------------------------------------------------------------------------------------

        <head>

                <meta charset="utf-8" />

                <link rel="stylesheet" href="curriculum.css" />

                <title> CV Inès </title>

            </head>


            <body>
                 <h1> Inès </h1>

                 <p class="tagline">Etudiante en communication digitale</p>
                 <p>

                     <a href="images/ines.jpg"><img src="images/ines_mini.jpg"alt="Photo Inès" title="Cliquez pour agrandir"/></a>

                </p>

                <p>
                <h2> Mon expérience </h2>

        -------------------------------------------------------------------------------------------------

        J'ai donc utilisé la balise "class" parce qu'il n'y a que le paragraphe qui contient la phrase "étudiante en communication digitale" que je souhaiterais centrer au milieu de la page, et non pas l'ensemble des paragraphes.

        or, quand je fais:

        .tagline

        {
        text-align: center;
        }

        Ça ne marche pas :( !

        • Partager sur Facebook
        • Partager sur Twitter
        Anonyme
          19 septembre 2017 à 13:58:17

          Hello Ines,

          Ca fonctionne parfaitement chez moi ;)

          https://jsfiddle.net/4N42K1/883k8bow/

          • Partager sur Facebook
          • Partager sur Twitter
            19 septembre 2017 à 14:05:14

            Bonjour,

            .tagline {
              text-align: center;
            }

            devrait parfaitement fonctionner, comme le dit 4N42K1.

            Pour info : ce n'est pas une question de "balises de type block" (le terme est d'ailleurs erroné depuis HTML5, "block" ou "inline" c'est un rendu, le type des balises est désormais fonction du contenu qu'elles peuvent accueillir), mais tout simplement que "text-align" aligne le contenu d'un élément, pas l'élément lui-même.

            • Partager sur Facebook
            • Partager sur Twitter

            Pas d'aide concernant le code par MP, le forum est là pour ça :)

              19 septembre 2017 à 14:25:09

              Bon si tout fonctionne chez tout le monde verifie le truc le plus bête du monde et pourtant le plus courant.

              Vérifie que ton html et ton css sois dans le même dossier.

              change le nom de ton css, c'est le genre de nom qui peut poser problème avec une simple faute de frappe, au début préfère lui :

              <link rel="stylesheet" href="style.css" />

              et change ton fichier css en style.css

              Des fois c'est tout bête

              • Partager sur Facebook
              • Partager sur Twitter

              Compos sui.

                19 septembre 2017 à 20:27:08

                Merci à tous pour vos réponses, il m'a suffi de déplacer le </p> après digitale et tout a fonctionné !

                Et merci pour cette précision Lamercarlate, j'avoue que je ne suis pas encore au point sur les balises et leurs usages.

                • Partager sur Facebook
                • Partager sur Twitter
                  19 septembre 2017 à 20:29:09

                  > déplacer le </p> après digitale

                  Euh, c'est-à-dire ? Qu'as-tu fait ?

                  • Partager sur Facebook
                  • Partager sur Twitter

                  Pas d'aide concernant le code par MP, le forum est là pour ça :)

                    19 septembre 2017 à 20:42:01

                    Avant j'avais ça :

                    <p class="tagline">Etudiante en communication digitale</p>

                    Et quand j'ai mis un espace entre entre "digitale" et </p> le code a fonctionné.

                    • Partager sur Facebook
                    • Partager sur Twitter
                      19 septembre 2017 à 21:08:04

                      Ha ouaisssss quand même .....
                      • Partager sur Facebook
                      • Partager sur Twitter

                      Compos sui.

                        19 septembre 2017 à 21:09:49

                        Ça ne devrait pas du tout être nécessaire. Je penche plutôt pour un cache navigateur pas vidé.
                        • Partager sur Facebook
                        • Partager sur Twitter

                        Pas d'aide concernant le code par MP, le forum est là pour ça :)

                        Alignement de texte sur CSS3

                        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                        × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                        • Editeur
                        • Markdown