Wie richtet man Elemente innerhalb eines Divs vertikal aus?-HTML-Tutorial-php.cn

Wie richtet man Elemente innerhalb eines Divs vertikal aus?

WBOY

Freigeben： 2023-08-20 17:37:19

nach vorne

1139 Leute haben es durchsucht

Wie richtet man Elemente innerhalb eines Divs vertikal aus?

Mit einer der folgenden Methoden können wir Elemente in einem Div ganz einfach vertikal ausrichten: −

Positionsattribut
Zeilenhöhenattribut
Attribute füllen

Schauen wir uns die Beispiele einzeln an -

Verwenden Sie das Positionsattribut, um Elemente in einem Div vertikal auszurichten

Die Positionseigenschaft wird zum Positionieren eines Elements verwendet. Sie kann in Verbindung mit den Eigenschaften oben, rechts, unten und links verwendet werden, um ein Element an der gewünschten Stelle zu positionieren

statisch − Elementboxen werden als Teil des normalen Dokumentflusses nach vorherigen und folgenden Elementen angeordnet.
relativ − Der Kasten des Elements wird als Teil des normalen Flusses angeordnet und dann um einen gewissen Abstand versetzt.
absolut − Die Box eines Elements wird relativ zu seinem enthaltenden Block angeordnet und vollständig aus dem normalen Fluss des Dokuments entfernt.
fest − Die Elementbox ist absolut positioniert und hat die Verhaltensbeschreibung Position: absolut. Der Hauptunterschied besteht darin, dass der enthaltende Block aus fest positionierten Elementen immer das Ansichtsfenster ist.

Sehen wir uns nun ein Beispiel für die vertikale Ausrichtung von Elementen in einem Div mithilfe des Positionsattributs −

an Die chinesische Übersetzung von

Beispiel

lautet:

Beispiel

<!DOCTYPE html>
<html>
<head>
   <title>Align Elements</title>
   <style>
      #demo1 {
         position: relative;
      }
      #demo2 {
         position: absolute;
         top: 50%;
         height: 100px;
         margin-top: -50px;
      }
      #demo1 {
         background-color: yellow;
         border: 2px solid gray;
         height: 15em;
      }
      #demo2 {
         background-color: skyblue;
         border: 1px solid orange;
         width: 100%;
      }
   </style>
</head>
<body>
   <h1>Vertically Align Elements</h1>
   <p>Use the position property:</p>
   <div id="demo1">
      <div id="demo2">
         <p>This is a demo text</p>
         <p>This is another demo text</p>
      </div>
   </div>
</body>
</html>

Nach dem Login kopieren

Verwenden Sie die Eigenschaft line-height, um Elemente in einem Div vertikal auszurichten

Das Attribut „line-height“ ändert die Höhe des Inline-Felds, aus dem eine Textzeile besteht. Hier sind die möglichen Werte für line-height -

normal − weist den Browser an, die Zeilenhöhen innerhalb von Elementen auf einen „angemessenen“ Abstand festzulegen.
Zahl − Die tatsächliche Höhe der Linien im Element ist dieser Wert multipliziert mit der Schriftgröße des Elements.
length − Die Höhe der Zeile im Element ist der angegebene Wert.
Prozentsatz − Die Höhe einer Zeile in einem Element wird als Prozentsatz der Schriftgröße des Elements berechnet.

Sehen wir uns nun ein Beispiel für die vertikale Ausrichtung von Elementen in einem Div mithilfe der Eigenschaft „line-height“ an -

Die chinesische Übersetzung von

Beispiel

lautet:

Beispiel

<!DOCTYPE html>
<html>
<head>
   <title>Align Elements</title>
   <style>
      p {
         margin: 0;
      }
      #demo {
         border: 3px solid yellow;
         background-color: orange;
         height: 100px;
         line-height: 100px;
      }
   </style>
</head>
<body>
   <h1>Vertically Aligned Element</h1>
   <p>Use the line-height property:</p>
   <div id="demo">
      <p>This is demo text</p>
   </div>
</body>
</html>

Nach dem Login kopieren

Verwenden Sie das Padding-Attribut, um Elemente in div vertikal auszurichten

Mit der Eigenschaft

padding können Sie angeben, wie viel Platz zwischen dem Inhalt eines Elements und seinem Rand bleiben soll. Der Wert dieses Attributs sollte Länge, Prozentsatz oder das Wort „erben“ sein. Wenn der Wert geerbt ist, entspricht seine Auffüllung der des übergeordneten Elements. Wenn Prozentsätze verwendet werden, beziehen sich die Prozentsätze auf das enthaltende Feld.

Die folgenden CSS-Eigenschaften können zur Steuerung von Listen verwendet werden. Mithilfe der folgenden Eigenschaften können Sie auch unterschiedliche Füllwerte für jede Seite der Box festlegen -

padding-bottom gibt die untere Polsterung eines Elements an.
padding-top gibt die obere Polsterung eines Elements an.
padding-left gibt den linken Abstand eines Elements an.
padding-right gibt die richtige Polsterung eines Elements an.
padding dient als Abkürzung für die vorangehenden Eigenschaften.

Sehen wir uns nun ein Beispiel für die vertikale Ausrichtung von Elementen in einem Div mithilfe der Padding-Eigenschaft an −

Die chinesische Übersetzung von

Beispiel

lautet:

Beispiel

<!DOCTYPE html>
<html>
<head>
   <title>Align Element</title>
   <style>
      .demo {
         padding: 60px 0;
         border: 2px solid #5c34eb;
         background-color: orange;
      }
   </style>
</head>
<body>
   <h1>Vertically Align Element</h1>
   <p>Use the padding property:</p>
   <div class="demo">
      <p>This is demo text.</p>
      <p>This is another text.</p>
   </div>
</body>
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie richtet man Elemente innerhalb eines Divs vertikal aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!