HTML-Einstellungscenter-Anzeige-Front-End-Fragen und Antworten-php.cn

HTML-Einstellungscenter-Anzeige

WBOY

Freigeben： 2023-05-21 17:07:37

Original

27287 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!