„Wenn ein Arbeiter seine Arbeit gut machen will, muss er zuerst seine Werkzeuge schärfen.“ – Konfuzius, „Die Gespräche des Konfuzius. Lu Linggong“
Titelseite > Programmierung > Wie richtet man ein innerhalb eines vertikal aus?

Wie richtet man ein innerhalb eines vertikal aus?

Veröffentlicht am 09.11.2024
Durchsuche:355

How to Vertically Align a  Inside a ?

Einen vertikal innerhalb eines

ausrichten

Stellen Sie sich die folgende Situation vor: Sie haben einen in einem , wie in diesem Code zu sehen:

<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 wird das an der unteren linken Ecke des

ausgerichtet. Um den innerhalb des
vertikal zu zentrieren, ziehen Sie die folgenden Ansätze in Betracht:

Option 1: Manipulation der Zeilenhöhe

Legen Sie die Zeilenhöhe des fest untergeordnetes muss gleich der Höhe des

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

#tag1_outer {
  line-height: 20px;
}

Option 2: Absolute Positionierung

Absolute Positionierung auf den

-Container anwenden. Positionieren Sie dann das untergeordnete Element absolut oben:50 % und verwenden Sie margin-top:-YYYpx, wobei YYY die Hälfte der bekannten Höhe des untergeordneten Elements 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.

Neuestes Tutorial Mehr>

Haftungsausschluss: Alle bereitgestellten Ressourcen stammen teilweise aus dem Internet. Wenn eine Verletzung Ihres Urheberrechts oder anderer Rechte und Interessen vorliegt, erläutern Sie bitte die detaillierten Gründe und legen Sie einen Nachweis des Urheberrechts oder Ihrer Rechte und Interessen vor und senden Sie ihn dann an die E-Mail-Adresse: [email protected] Wir werden die Angelegenheit so schnell wie möglich für Sie erledigen.

Copyright© 2022 湘ICP备2022001581号-3