CSS-Element vertikal zentriert-CSS-Tutorial-php.cn

CSS-Element vertikal zentriert

autoload

Freigeben： 2021-04-15 13:59:41

Original

1536 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!