Heim > Artikel > Web-Frontend > Wie richtet man ein innerhalb eines vertikal aus?

Wie richtet man ein innerhalb eines vertikal aus?

Linda HamiltonOriginal: 2024-10-28 02:22:01521Durchsuche

How to Vertically Align a Inside a ?

Ausrichten eines Vertikal innerhalb eines

Stellen Sie sich die folgende Situation vor: Sie haben ein innerhalb eines

verschachtelt, wie in diesem Code zu sehen ist:

<div 
  id="theMainDiv"
  style="
    border:solid 1px gray;
    cursor:text;
    width:400px;
    padding:0px;"
>
  <span 
    id="tag1_outer" 
    style="
      background:#e2e6f0;
      padding-right:4px;
      padding-left:4px;
      border:solid 1px #9daccc;
      font:normal 11px arial;
      color:#3c3c3c"
  >as</span>
</div>

Standardmäßig ist das wird an der unteren linken Ecke des

ausgerichtet. Zum Zentrieren des innerhalb des

vertikal ziehen Sie die folgenden Ansätze in Betracht:

Option 1: Manipulation der Zeilenhöhe

Legen Sie die Zeilenhöhe des untergeordneten der Höhe von

entsprechen.

#theMainDiv {
  height: 20px; /* Set the div height for reference */
}

#tag1_outer {
  line-height: 20px;
}

Option 2: Absolute Positionierung

Absolute Positionierung auf

anwenden; Container. Positionieren Sie dann das Kind absolut oben:50 % und verwenden Sie margin-top:-YYYpx, wobei YYY die Hälfte der bekannten Größe des Kindes darstellt.

#theMainDiv {
  position: relative; /* Apply relative positioning to the div */
}

#tag1_outer {
  position: absolute;
  top: 50%;
  margin-top: -10px; /* Half the height of the child span */
}

Weitere Details und zusätzliche Techniken finden Sie im bereitgestellten Artikel zum Verständnis der vertikalen Ausrichtung .

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

for default this position margin

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：Kann man Text mit CSS vertikal strecken, ohne dass er größer erscheint?Nächster Artikel：Kann man Text mit CSS vertikal strecken, ohne dass er größer erscheint?

In Verbindung stehende Artikel

Mehr sehen