Heim >Web-Frontend >CSS-Tutorial >CSS-Element vertikal zentriert

CSS-Element vertikal zentriert

autoload
autoloadOriginal
2021-04-06 16:04:031757Durchsuche

CSS-Element vertikal zentriert

Das lästige Problem bei CSS ist die vertikale Zentrierung. Es gibt mehrere Möglichkeiten, eine vertikale Zentrierung zu erreichen, aber jede Methode weist bestimmte Einschränkungen auf, sodass die vertikale Zentrierung entsprechend den tatsächlichen Geschäftsszenarien verwendet werden kann.

1. Der Inhalt im Container besteht nur aus einer Textzeile

2. Die einfachste vertikale Zentrierungsmethode in CSS besteht darin, den Container anzugeben Gleiche obere und untere Polsterung, sodass Behälter und Inhalt ihre eigene Höhe bestimmen können. Schauen Sie sich das Beispiel unten an, das den Inhalt im übergeordneten Container vertikal zentriert, indem auf einen gleichen Wert gesetzt wird.

<!DOCTYPE html>
<html>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    div {
      height: 60px;
      background-color: #1888fa;
      color: white;
    }
    span {
      line-height: 60px;/* 设置一个大的行高,让它等于理想的容器高度。
      这样会让容器高度扩展到能够容纳行高。如果内容不是行内元素,可以设置为inline-block。 */
    }
  </style>
  <body>
    <div>
      <span>测试</span>
    </div>
  </body>
</html>

3. Verwenden Sie FlexBox

padding-top 和padding-bottom

<!DOCTYPE html>
<html>
   <style>
      * {
        padding: 0;
        margin: 0;
      }
      div {
        padding-top: 20px;  
        padding-bottom: 20px;
        background-color: #1888FA;
        color: white;
      }
    </style>
    <body>
      <div>
         <span>测试</span>
      </div>
    </body>
</html>

Empfohlen: „Zusammenfassung der CSS-Interviewfragen 2021 (Neueste)

Das obige ist der detaillierte Inhalt vonCSS-Element vertikal zentriert. 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:Was bedeutet Skew in CSS?Nächster Artikel:Was bedeutet Skew in CSS?