Wie man Text in einer HTML-Seite vertikal und horizontal zentriert

Question 1

Ich habe einige Erfahrung mit Java, C, Datenbanken, Netzwerken usw. Aber alles, was mit Html zu tun hat, bin ich ein Anfänger. Das einzige, wonach ich suche, ist, zwei Wörter in der Mitte der Seite zu zentrieren (Diese Seite hat nur diese beiden Worte).

                                WORD1
                          WORDWORDWORDWORD2

Ich habe einige WYSIWYG-Software wie KompoZer ausprobiert, aber als ich mir den Quellcode ansah, hatte er einen schrecklichen statischen Code mit viel generiert <br> um die vertikale Mitte der Seite zu erreichen. Jeder könnte mir helfen, eine gute Lösung für dieses Problem zu finden

Question 2

Das horizontale Zentrieren ist einfach – das vertikale Zentrieren ist in CSS etwas schwierig, da es nicht wirklich unterstützt wird (außer Tabellenzellen <td>, was ein schlechter Stil für das Layout ist, es sei denn, eine Tabelle wird wirklich ebenso benötigt wie – nun – eine Tabelle). Sie können jedoch semantisch korrekte HTML-Tags verwenden und Tabellenanzeigeeigenschaften darauf anwenden.

Das ist eine mögliche Lösung – es gibt viele Ansätze, hier ist ein guter Artikel dazu.

In Ihrem Fall sollte so etwas ausreichen:

<!DOCTYPE html>
<html lang="de">
    <head>
        <title>Hello World</title>
        <style>

        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            width: 100%;
        }

        body {
            display: table;
        }

        .my-block {
            text-align: center;
            display: table-cell;
            vertical-align: middle;
        }
        </style>
    </head>
    <body>
    <div class="my-block">
       WORD1<br />
       WORDWORDWORDWORD2
    </div>
    </body>
</html>

Question 3

Sie können den Text in a einfügen <div> und richten Sie den Text mit CSS aus:

<div style="text-align:center;">
    WORD1<br />
    WORDWORDWORDWORD2
</div>

das <div> ist ein Blockelement, was bedeutet, dass es auf 100 % Breite gestreckt wird und der Text in der Mitte der Seite steht

jsFiddle Beispiel

Question 4

Der “Best Practice”-Weg wäre folgender:

Da Sie sagen, dass Sie neu sind, zeige ich Ihnen die gesamte Dokumentenstruktur. Style sollte in das Head-Tag eingefügt werden, damit es zuerst geladen wird, und das sollten Sie auch Vermeiden Sie den Inline-Stil so weit wie möglich.

<!DOCTYPE html>
<html>
    <head>
    <style>
    .center{
        text-align:center;
    }
    </style>
    </head>
    <body>
       <div class="center">
           <p>WORD1</p>
           <p>WORDWORDWORDWORD2</p>
        </div>
    </body>
</html>

Question 5

In diesen Zeiten wird eine vollständige Zentrierung am besten mit Flexbox- oder Grid-Layout erreicht. Wenn wir also nur ein Element innerhalb seines übergeordneten Elements zentrieren möchten, gehen wir folgendermaßen vor:

HTML

<div class="parent">
   <div class="child">Some Stuff</div>
</div>

CSS

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}

/* Or this way if the page doesn't have to uncenter with changing screen size */
/* .parent {
       display: flex;
       place-items: center;
   }  */

.child {
    text-align: center;   /* If we want the child element's content horiz centered within its own container */
}

Question 6

Mach es einfach so

<div style="text-align:center;">
   WORD1<br />
   WORDWORDWORDWORD2
</div>

Question 7

Der beste Weg ist, es in ein Element wie div einzufügen. Innerhalb von div können Sie Text leicht zentrieren text-align: center; (vorausgesetzt, Sie setzen diesem div eine gewisse Breite). Dann können Sie dieses div auf der Seite zentrieren, indem Sie einen automatischen Randstil hinzufügen (margin: 0px auto;)

w3 Anleitung zum Zentrieren 😉

Question 8

Um Text zu zentrieren, können Sie das verwenden <center> HTML-Tag:

<center>Blah</center>

oder Sie könnten CSS verwenden:

<style>
  .centered_text {
    text-align:middle;
  }
</style>

<a class="centered_text">Blah</a>