Frage Text vertikal neben einem Bild ausrichten?


Warum nicht? vertical-align: middle Arbeit? Und doch, vertical-align: top  tut Arbeit.

<div>
   <img style="width:30px;height:30px">
   <span style="vertical-align:middle">Doesn't work.</span>
</div>

1684
2018-01-28 21:01


Ursprung


Antworten:


Tatsächlich ist es in diesem Fall ganz einfach: Wenden Sie die vertikale Ausrichtung auf das Bild an. Da es alles in einer Zeile ist, ist es wirklich das Bild, das ausgerichtet werden soll, nicht der Text.

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://placehold.it/60x60">
  <span style="">Works.</span>
</div>

Getestet in FF3.

Jetzt können Sie flexbox für diese Art von Layout verwenden.

.box {
   display: flex;
   align-items:center;
}
<div class="box">
    <img src="https://placehold.it/60x60">
    <span style="">Works.</span>
</div>


1899
2018-01-28 21:10



Hier sind einige einfache Techniken für die vertikale Ausrichtung:

Einzeilige vertikale Ausrichtung: Mitte

Dies ist einfach: Stellen Sie die Zeilenhöhe des Textelements auf die gleiche Höhe wie der Container ein

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>

Mehrzeilige vertikale Ausrichtung: unten

Platziere ein inneres Div relativ zu seinem Container

<div style="position:relative;width:30px;height:60px;">
  <div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>

Mehrere Zeilen vertikal ausgerichtet: Mitte

<div style="display:table;width:30px;height:60px;">
  <div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>

Wenn Sie alte Versionen von IE <= 7 unterstützen müssen

Um dies auf der ganzen Linie richtig zu machen, müssen Sie das CSS ein wenig hacken. Glücklicherweise gibt es einen IE-Bug, der zu unseren Gunsten funktioniert. Rahmen top:50% auf dem Behälter und top:-50% Auf dem inneren Div können Sie dasselbe Ergebnis erzielen. Wir können die beiden kombinieren, indem wir eine andere Funktion verwenden, die IE nicht unterstützt: erweiterte CSS-Selektoren.

<style type="text/css">
  #container {
    width: 30px;
    height: 60px;
    position: relative;
  }
  #wrapper > #container {
    display: table;
    position: static;
  }
  #container div {
    position: absolute;
    top: 50%;
  }
  #container div div {
    position: relative;
    top: -50%;
  }
  #container > div {
    display: table-cell;
    vertical-align: middle;
    position: static;
  }
</style>

<div id="wrapper">
  <div id="container">
    <div><div><p>Works in everything!</p></div></div>
  </div>
</div>

Variable Behälterhöhe vertikal ausrichten: Mitte

Diese Lösung benötigt einen etwas moderneren Browser als die anderen Lösungen, da sie den transform: translateY Eigentum. (http://caniuse.com/#feat=transforms2d)

Wenn Sie die folgenden drei CSS-Zeilen auf ein Element anwenden, wird es vertikal innerhalb des übergeordneten Elements zentriert, unabhängig von der Höhe des übergeordneten Elements:

position: relative;
top: 50%;
transform: translateY(-50%);

317
2018-01-28 21:45



Ändere dein div in einen Flex-Container:

div {display:flex;}


Jetzt gibt es zwei Methoden, um die Ausrichtungen für den gesamten Inhalt zu zentrieren:

Methode 1:

div {align-items:center;}

DEMO 


Methode 2:

div * {margin-top:auto; margin-bottom:auto;}

DEMO 


Probieren Sie verschiedene Breiten - und Höhenwerte auf der img und verschiedene Schriftgrößenwerte auf der span und du wirst sehen, dass sie immer in der Mitte des Containers bleiben.


79
2018-03-24 07:54



Sie müssen sich bewerben vertical-align: middle um beide Elemente perfekt zentriert zu haben.

<div>
  <img style="vertical-align:middle" src="http://lorempixel.com/60/60/">
  <span style="vertical-align:middle">Perfectly centered</span>
</div>

Das akzeptierte Antwort zentriert das Symbol um die Hälfte der x-Höhe des Textes daneben (wie in der CSS-Spezifikationen). Das ist vielleicht gut genug, kann aber ein wenig abweichen, wenn der Text Ober- oder Unterlängen von Ober- oder Unterlängen aufweist:

centered icon comparison

Auf der linken Seite ist der Text nicht ausgerichtet, auf der rechten Seite ist es wie oben gezeigt. Eine Live-Demo kann in diesem gefunden werden Artikel über vertikale Ausrichtung.

Hat jemand darüber gesprochen, warum vertical-align: top funktioniert in dem Szenario? Das Bild in der Frage ist wahrscheinlich größer als der Text und definiert somit die Oberkante der Linienbox. vertical-align: top auf dem Span-Element positioniert es dann einfach an der Spitze der Linien-Box.

Der Hauptunterschied im Verhalten zwischen vertical-align: middle und top ist, dass die erste Elemente relativ zu der Basislinie der Box bewegt (die wo immer benötigt wird, um alle vertikalen Ausrichtungen zu erfüllen und sich somit eher anfühlt unberechenbar) und der zweite relativ zu den äußeren Grenzen der Linienbox (die greifbarer ist).


68
2017-09-11 12:58



Die Technik, die in der angenommenen Antwort verwendet wird, funktioniert nur für einen einzeiligen Text (Demo), aber nicht mehrzeiliger Text (Demo) - wie dort erwähnt.

Wenn jemand mehrzeiligen Text vertikal zu einem Bild zentrieren muss, haben Sie hier einige Möglichkeiten (Methoden 1 und 2 inspiriert von Dieser CSS-Tricks Artikel)

Methode # 1: CSS-Tabellen (GEIGE) (IE8 + (kann ich benutzen))

CSS:

div {
    display: table;
}
span {
    vertical-align: middle;
    display: table-cell;
}

Methode 2: Pseudoelement auf Container (GEIGE) (IE8 +)

CSS:

div {
   height: 200px; /* height of image */
}

div:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

img {
    position: absolute;
}

span {
  display: inline-block;
  vertical-align: middle;
  margin-left: 200px;  /* width of image */
}

Methode 3: Flexbox (GEIGE) (kann ich benutzen)

CSS (Die obige Geige enthält Anbieterpräfixe):

div {   
    display: flex; 
    align-items: center;    
}
img {
    min-width: 200px; /* width of image */
}

47
2017-12-24 21:06



Dieser Code funktioniert sowohl in IE als auch in FF:

<div>
  <img style="width:auto; height:auto;vertical-align: middle;">
  <span>It does work on all browsers</span>
</div>

23
2017-07-02 14:41



Weil du das einstellen musst line-height auf die Höhe des div für dieses zu arbeiten


16
2018-01-28 21:05



Grundsätzlich müssen Sie sich an CSS3 halten.

-moz-box-align: center;
-webkit-box-align: center;

9
2017-11-29 18:24