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

Lesezeit: 5 Minuten

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

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

  • Benötigen Sie auch eine vertikale Zentrierung?

    – Simon Edström

    22. März 2012 um 15:51 Uhr

  • definiere “in der Mitte der Seite”. Oben und unten zentriert (vertikal)? Links und rechts zentriert (horizontal)?

    – DwB

    22. März 2012 um 15:52 Uhr

  • Ja Simon, ich bin total dankbar für all die schnellen Antworten, aber das Problem ist, dass sie alle nur die horizontale Zentrierung lösen. Was ich brauche, sind beide Positionen (horizontal und vertikal). Beide Wörter müssen in der Mitte der Seite stehen

    – tt0686

    22. März 2012 um 15:56 Uhr

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

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>

  • Gern geschehen – (HTML-Puristen würden direkt die <body> als Textcontainer anstelle eines zusätzlichen div).

    – Gipfel

    22. März 2012 um 16:47 Uhr

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

  • Wie in einer anderen Antwort erwähnt, ist dies für einen Anfänger in Ordnung, aber im Allgemeinen sollte HTML so semantisch wie möglich sein, und der Zeilenstil verstößt gegen dieses Prinzip sowie gegen die Trennung von Bedenken.

    – Chris Sobolewski

    22. März 2012 um 16:05 Uhr

Wie man Text in einer HTML Seite vertikal und horizontal zentriert
Chris Sobolewski

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>

1642561808 958 Wie man Text in einer HTML Seite vertikal und horizontal zentriert
Kofferraum

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 */
}

Mach es einfach so

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

  • Für einen Anfänger ist das in Ordnung, aber im Allgemeinen sollte HTML so semantisch wie möglich sein, und der Zeilenstil verstößt sowohl gegen dieses Prinzip als auch gegen die Trennung von Bedenken.

    – Chris Sobolewski

    22. März 2012 um 15:55 Uhr

1642561808 355 Wie man Text in einer HTML Seite vertikal und horizontal zentriert
Pförtner

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 😉

  • Für einen Anfänger ist das in Ordnung, aber im Allgemeinen sollte HTML so semantisch wie möglich sein, und der Zeilenstil verstößt sowohl gegen dieses Prinzip als auch gegen die Trennung von Bedenken.

    – Chris Sobolewski

    22. März 2012 um 15:55 Uhr

1642561808 156 Wie man Text in einer HTML Seite vertikal und horizontal zentriert
Adjam

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>

  • <center> ist abscheulich veraltet und sollte nicht verwendet werden. <a> ist standardmäßig display: inline also die text-align Eigentum trifft darauf nicht zu.

    – QUentin

    22. März 2012 um 15:51 Uhr

  • Center ist veraltet. HTML verarbeitet Daten, CSS dient der Anzeige.

    – Chris Sobolewski

    22. März 2012 um 15:52 Uhr

  • Danke für die Info @Quentin und @Chris Sobolewski. Hatte keine Ahnung, dass Sie nicht verwenden sollten <center>. Und jetzt denke ich darüber nach, Sie haben Recht mit der Verwendung der <a> Tag für Textausrichtung. Ich werde diese Antwort hier hinterlassen, damit andere die Kommentare lesen und sehen können, wo ich falsch gelaufen bin.

    – Adj

    22. März 2012 um 17:08 Uhr

  • Oh und middle ist kein gültiger Wert für die text-align Eigentum entweder.

    – QUentin

    22. März 2012 um 17:19 Uhr

.

542180cookie-checkWie man Text in einer HTML-Seite vertikal und horizontal zentriert

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy