Heim > Artikel > Web-Frontend > HTML-Einstellungscenter-Anzeige

HTML-Einstellungscenter-Anzeige

WBOYOriginal: 2023-05-21 17:07:3727218Durchsuche

HTML ist eine der am häufigsten verwendeten Auszeichnungssprachen im Webdesign, und die zentrierte Anzeige ist auch eine der grundlegendsten Anzeigemethoden im Webdesign. In diesem Artikel wird erläutert, wie Sie mithilfe von HTML eine zentrierte Anzeige auf Webseiten festlegen.

1. Horizontale Zentrierung

1.1 Verwendung des Textausrichtungsattributs

Sie können das Textausrichtungsattribut verwenden, um HTML-Elemente horizontal zu zentrieren. Dieses Attribut kann für ein übergeordnetes Element festgelegt werden, um dessen untergeordnete Elemente horizontal zu zentrieren.

Beispielcode:

<!doctype html>
<html>
  <head>
    <style>
      .container {
        text-align: center;
      }
    </style>
  <head>
  <body>
    <div class="container">
      <p>这是一段文字</p>
    </div>
  </body>
</html>

1.2 Verwenden des Randattributs

Sie können das Randattribut auch verwenden, um eine horizontale Zentrierung zu erreichen. Beachten Sie, dass diese Methode nur für Elemente mit fester Breite funktioniert.

Beispielcode:

<!doctype html>
<html>
  <head>
    <style>
      .container {
        width: 500px;
        margin: 0 auto;
      }
    </style>
  <head>
  <body>
    <div class="container">
      <p>这是一段文字</p>
    </div>
  </body>
</html>

2. Vertikale Zentrierung

2.1 Textausrichtungsattribute verwenden

Wenn Sie eine vertikale Zentrierung in HTML-Elementen erreichen müssen, können Sie das display:table-Attribut für das übergeordnete Element festlegen und die Anzeige festlegen: auf dem untergeordneten Element und den Eigenschaften „vertikal-align: middle“.

Beispielcode:

<!doctype html>
<html>
  <head>
    <style>
      .container {
        display: table;
        height: 500px;
        width: 100%;
        background-color: gray;
      }
      .inner {
        display: table-cell;
        vertical-align: middle;
      }
    </style>
  <head>
  <body>
    <div class="container">
      <div class="inner">
        <p>这是一段文字</p>
      </div>
    </div>
  </body>
</html>

2.2 Verwendung des Flex-Attributs

Eine andere Möglichkeit, eine vertikale Zentrierung zu erreichen, ist die Verwendung des Flex-Attributs. Legen Sie display: flex für das übergeordnete Element fest und legen Sie die Eigenschaften align-items: center und justify-content: center für das untergeordnete Element fest, um eine vertikale Zentrierung zu erreichen.

Beispielcode:

<!doctype html>
<html>
  <head>
    <style>
      .container {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 500px;
        width: 100%;
        background-color: gray;
      }
    </style>
  <head>
  <body>
    <div class="container">
      <p>这是一段文字</p>
    </div>
  </body>
</html>

Beide Methoden können problemlos eine Zentrierung in HTML erreichen. Es ist zu beachten, dass Sie bei Verwendung des Randattributs für die horizontale Zentrierung eine feste Breite angeben und die linken und rechten Werte des Randattributs auf „Auto“ setzen müssen, um eine zentrierte Anzeige zu erreichen.

Zusammenfassung:

In diesem Artikel werden zwei horizontale und zwei vertikale Zentrierungsmethoden vorgestellt. Die Eigenschaften „text-align“ und „margin“ eignen sich für die horizontale Zentrierung, während die Eigenschaften „display:table“, „display:flex“ und „vertikal-align“ für die vertikale Zentrierung geeignet sind . . In jedem Fall ist die Zentrierung in HTML einfach.

Das obige ist der detaillierte Inhalt vonHTML-Einstellungscenter-Anzeige. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：html ausblenden anzeigenNächster Artikel：html ausblenden anzeigen

In Verbindung stehende Artikel

Mehr sehen