web-dev-qa-db-fra.com

text-align: le centre ne fonctionne pas

J'ai essayé de chercher des réponses mais rien n'a fonctionné. J'essaie d'aligner un paragraphe. Je suis presque sûr que rien ne remplace le code en CSS. Voici le HTML et CSS: 

body {
  background-image: url("../../images/pic01.jpg");
  background-repeat;
}
#main {
  background-color: rgb(255, 84, 0);
  width: 75%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-top: auto;
  overflow: auto;
  height: 100%;
  color: rgb(255, 255, 255);
}
#center {
  text-align: center;
}
<body id="top">
  <div id="main">
    <p id="center">
      <h1> TEST </h1> 
    </p>
  </div>
</body>

Quelle est l'erreur ici? 

htmlcsstext-align
5
Nedas Bolevičius

text-align: center affecte les nœuds de texte purs ainsi que les éléments enfants qui ont display: inline; ou display: inline-block;. Votre élément enfant assumé est h1 qui, par défaut, a display: block;. Ainsi, même s'il était autorisé à avoir un h1 dans une p, cela ne fonctionnerait toujours pas (par exemple, si vous remplaciez le <p id="center"> par un <div id="center">, vous auriez toujours le centrage "non fonctionnel").

p ne peut avoir que le prétendu phrasing content, c'est-à-dire que seuls certains éléments sont autorisés en tant qu'éléments enfants dans un paragraphe.

L'utilisation de tout élément de contenu de flux (tel que h1, par exemple) entraîne la fermeture automatique de la balise "entourante" p. Donc, voici ce que votre navigateur rend vraiment:

<div id="main">
    <p id="center"> </p>
    <h1> TEST </h1> 
</div>

Une dernière chose, parce que vous avez dit que vous êtes un débutant dans le domaine frontend: 

N'utilisez pas les sélecteurs #id en CSS. Utilisez toujours CSS .classes à la place. Une fois que vous avez beaucoup progressé, découvrez pourquoi ici: http://oli.jp/2011/ids/

10
connexo

Votre code HTML est invalide. Un <p> ne peut pas contenir un <h1>. La plupart des navigateurs tenteront de corriger l'erreur en fermant le paragraphe avant le titre, puis en créant un autre paragraphe après celui-ci.

Vous pouvez supprimer l'en-tête ou le paragraphe et utiliser CSS pour styler à votre guise. 

Exemple jsFiddle

2
j08691

Pour que le text-aling: center fonctionne, vous devez également passer l’option margin: auto. 

2
Alexander Luna

Donnez text-align: center à #main h1, par exemple:

#main h1 {
  text-align: center;
}

Bien que vous ayez utilisé <h1> à l'intérieur de <p>, qui est un code HTML non valide, votre navigateur s'en occupe en fermant le <p></p> avant de démarrer <h1>.

Regardez l'extrait ci-dessous:

#main h1 {
  text-align: center;
}

body {
    background-image: url("../../images/pic01.jpg");
    background-repeat;
}

#main{
    background-color: rgb(255, 84, 0);
    width: 75%;

    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    margin-top: auto;

    overflow:auto;
    height:100%;
    color: rgb(255, 255, 255);
}

#center {
    text-align: center;
}
<html>
    <head>
        <title>HTML PAMOKOS</title>
        <link rel="stylesheet" href="../assets/css/html.css" />
    </head>

    <body id="top">
        <div id="main">
            <p id="center"></p>
            <h1> TEST </h1>
        </div>
    </body>

</html>

J'espère que cela t'aides!

0
Saurav Rastogi