webentwicklung-frage-antwort-db.com.de

text ausrichten: Zentrum funktioniert nicht

Ich habe versucht, nach Antworten zu suchen, aber es hat nichts funktioniert. Ich versuche einen Absatz auszurichten. Ich bin mir ziemlich sicher, dass nichts Code in CSS überschreibt. Hier ist das HTML und 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>

Was ist der Fehler hier? 

5

text-align: center wirkt sich auf reine Textknoten sowie auf untergeordnete Elemente mit display: inline; oder display: inline-block; aus. Ihr vorausgesetzt child Element ist h1, der standardmäßig display: block; hat. Selbst wenn es erlaubt wäre, einen h1 in einer p zu haben, würde dies immer noch nicht funktionieren (wenn Sie beispielsweise den <p id="center"> durch einen <div id="center"> ersetzen würden, würden Sie immer noch eine "nicht funktionierende" Zentrierung ausführen).

p kann nur sogenannte phrasing content haben, dh nur bestimmte Elemente sind als untergeordnete Elemente innerhalb eines Absatzes zulässig.

Die Verwendung beliebiger Flussinhaltselemente (wie beispielsweise h1) führt zu automatisiertem Schließen des "umgebenden" p-Tags. Dies ist also, was Ihr Browser wirklich darstellt:

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

Eine letzte Sache, weil Sie gesagt haben, dass Sie Anfänger in Sachen Frontend sind: 

Verwenden Sie in CSS keine #id-Selektoren. Verwenden Sie stattdessen immer CSS .classes. Wenn Sie eine Menge Fortschritte gemacht haben, lesen Sie den Grund hier: http://oli.jp/2011/ids/

10
connexo

Ihr HTML ist ungültig. Ein <p> darf keinen <h1> enthalten. Die meisten Browser versuchen, den Fehler zu korrigieren, indem sie den Absatz vor der Überschrift schließen und danach einen weiteren Absatz erstellen.

Sie können entweder die Überschrift oder den Absatz entfernen und bei Bedarf mit CSS formatieren. 

jsFiddle Beispiel

2
j08691

Damit der text-aling: center funktioniert, müssen Sie auch die margin: auto-Option übergeben. 

2
Alexander Luna

Gib text-align: center an #main h1, wie:

#main h1 {
  text-align: center;
}

Sie haben <h1> innerhalb von <p> verwendet, einem ungültigen HTML-Code, und Ihr Browser behandelt dies, indem Sie <p></p> schließen, bevor Sie <h1> starten.

Schauen Sie sich den folgenden Ausschnitt an:

#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>

Hoffe das hilft!

0
Saurav Rastogi