wake-up-neo.com

Wie zentriere ich ein <span> vertikal in einem div?

Der Code:

<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>

Beim Rendern wird der Bereich an der linken unteren Ecke des Div ausgerichtet.

htmlcsscenter
198
Babiker

Siehe meinen Artikel über Verständnis der vertikalen Ausrichtung . Es gibt mehrere Techniken, um das zu erreichen, was Sie am Ende der Diskussion wollen.

(Super-Kurzzusammenfassung: entweder die Zeilenhöhe des Kindes gleich der Höhe des Containers setzen oder die Position auf dem Container setzen und das Kind unbedingt auf top:50% Positionieren. mit margin-top:-YYYpx, wobei YYY die Hälfte der bekannten Größe des Kindes ist.)

182
Phrogz

Bei deinen Eltern DIV eintragen

display:table;

und an deinem Kindelement anfügen

 display:table-cell;
 vertical-align:middle;
143
Otto Kanellis

Wie in einer ähnlichen Frage , benutze display: inline-block mit einem Platzhalterelement zum vertikalen Zentrieren des Bereichs innerhalb eines Blockelements:

html, body, #container, #placeholder { height: 100%; }

#content, #placeholder { display:inline-block; vertical-align: middle; }
<!doctype html>
<html lang="en">
  <head>
  </head>

  <body>
    <div id="container">
      <span id="content">
        Content
      </span>
      <span id="placeholder"></span>
    </div>
  </body>
</html>

Die vertikale Ausrichtung gilt nur für Inline-Elemente oder Tabellenzellen . Verwenden Sie sie daher zusammen mit display:inline-block oder display:table-cell mit einem display:table übergeordnetes Element beim vertikalen Zentrieren von Blockelementen.

Referenzen:

CSS horizontale und vertikale Zentrierung

36
Paul Sweatte

Schnelle Antwort für einzelne Zeilen

Machen Sie das Kind (in diesem Fall eine Spanne) das gleiche line-height als übergeordnetes <div> 's Höhe

<div class="parent">
  <span class="child">Yes mom, I did my homework lol</span>
</div>

Sie sollten dann die CSS-Regeln hinzufügen

.parent { height: 20px; }
.child { line-height: 20px; vertical-align: middle; }


Oder Sie können es mit einer untergeordneten Auswahl anvisieren

.parent { height: 20px; }
.parent > span { line-height: 20px; vertical-align: middle; }

Hintergrund zu meiner eigenen Verwendung

Ich bin auf dieses ähnliche Problem gestoßen, bei dem ich Elemente in einem mobilen Menü vertikal zentrieren musste. Ich habe das Div gemacht und überspannt innerhalb der gleichen Zeilenhöhe. Beachten Sie, dass dies für ein Meteorprojekt ist und daher kein Inline-CSS verwendet;)

HTML 

<div class="international">        
  <span class="intlFlag">
    {{flag}}        
  </span>

  <span class="intlCurrent">
    {{country}}
  </span>

  <span class="intlButton">
    <i class="fa fa-globe"></i>
  </span> 
</div>

CSS (Option für mehrere Bereiche in einem Div)

.international {
  height: 42px;
}

.international > span {
  line-height: 42px;
}

In diesem Fall hätte ich die CSS-Regel direkt zu dieser Spanne hinzufügen können, wenn ich nur eine Spanne gehabt hätte.

CSS (Option für eine bestimmte Spanne)

.intlFlag { line-height: 42px; }

Hier ist, wie es für mich angezeigt wird

enter image description here

33
JGallardo

Fügen Sie dem übergeordneten Div eine Höhe von 50px hinzu. Fügen Sie im untergeordneten Bereich die Zeilenhöhe hinzu: 50px; Jetzt wird der Text im Bereich vertikal zentriert. Das hat bei mir funktioniert.

0
DTS