text-align: center ne fonctionne pas
J'ai essayé de chercher des réponses, mais rien n'a fonctionné. Je suis en train d'aligner un paragraphe. Je suis assez sûr que rien n'est l'écrasement de code dans le CSS. Voici le code HTML et CSS:
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;
}HTML:
<body id="top">
<div id="main">
<p id="center">
<h1> TEST </h1>
</p>
</div>
</body>Qu'est-ce que l'erreur ici?
- Le HTML n'est pas valide. Un
<p>ne peut pas contenir une<h1> - ... sauf si vous définissez
h1 { display: inline-block; }(qui btw permettrait également de résoudre le texte-centrage de la question). - Non, le code HTML est toujours valide. La plupart des navigateurs de tenter de corriger l'erreur en fermant le paragraphe avant de la tête, puis la création d'un nouveau paragraphe après. Et
<p>éléments de niveau bloc par défaut. - en plus de @j08691 mots - stackoverflow.com/a/9852381/1499781
- merci beaucoup! Je n'ai jamais vraiment su qui, en quelque sorte... je vous suggère de poster que si je pouvais marquer comme correcte.
- C'est que vrai même si vous définissez la
h1àinlineouinline-block? - Pour être plus précis, ce qui est incorrect sur le code ci-dessus est la fermeture
</p>tag après le</h1>.<p id="center"> <h1> TEST </h1>doit être parfaitement valide en HTML depuis qu'il est autorisé à ne pas fermer explicitement<p>balises.
Vous devez vous connecter pour publier un commentaire.
text-align: centeraffecte pur nœuds de texte ainsi que les éléments enfants qui ontdisplay: inline;oudisplay: inline-block;. Votre supposé élément enfant esth1qui a par défautdisplay: block;. Donc, même s'il lui est permis d'avoir unh1à l'intérieur d'unp, ce n'est pas le travail (par exemple, si vous avez remplacé le<p id="center">par un<div id="center">vous souhaitez toujours exécuter en "non-travail" centrage).pne peut avoir soi-disant le phrasé de contenu, c'est que certains éléments sont admis comme éléments d'enfant à l'intérieur d'un paragraphe.À l'utilisation de tout contenu de flux d'éléments (comme par exemple
h1) des résultats de automatisé de clôture de "l'encerclement"ptag. C'est donc ce que votre navigateur rend vraiment:Une dernière chose, parce que vous avez dit que vous êtes un débutant dans le frontend questions:
Ne pas utiliser
#idsélecteurs CSS. Toujours utiliser les CSS.classes à la place. Lorsque vous aurez progressé beaucoup plus, lire sur le pourquoi ici: http://oli.jp/2011/ids/Pour la
text-aling: centerde travail que vous avez passer aussi lemargin: autooption.Votre code HTML n'est pas valide. Un
<p>ne peut pas contenir une<h1>. La plupart des navigateurs de tenter de corriger l'erreur en fermant le paragraphe avant de la tête, puis la création d'un nouveau paragraphe après.Vous pouvez supprimer soit la position ou le point et d'utiliser des CSS pour le style que nécessaire.
jsFiddle exemple
Donner
text-align: centerà#main h1, comme:Ont un coup d'oeil à l'extrait de code ci-dessous:
CSS:
HTML:
Espérons que cette aide!
divélément? Lemainest littéralement le principal, ce qui signifie que tout doit y être. Il crée un élément qui est aligné horizontalement vers le centre où j'ai mis tous mes paragraphes et d'autres éléments.#main h1, mise à jour de ma réponse.<h1>à l'intérieur de<p>, ce qui est une mauvaise pratique, et votre navigateur ne supporte pas du tout." Ce n'est pas juste une mauvaise pratique, c'est du code HTML non valide, et la plupart des navigateurs va tenter de remédier à cela par la fermeture de l'alinéa avant le titre et la création d'un autre vide un après.CSS:
HTML: