Vertikal ausrichten Text neben einem Bild?

Question

Warum werden nicht vertical-align: middle Arbeit? Und doch vertical-align: top hat Arbeit.

span{
  vertical-align: middle;
}

<div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>Doesn't work.</span>
</div>

Answer 1

Eigentlich in diesem Fall ist es ganz einfach: die vertikale align auf das Bild anwenden. Da es alles in einer Zeile ist, ist es wirklich das Bild, das Sie ausgerichtet werden sollen, 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>

Answer 2

Hier sind einige einfache Techniken für vertical-align:

One-line vertical-align: middle

Das ist einfach: die Zeilenhöhe des Textelements eingestellt wird, dass der Behälter gleich

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

Multiple-Linien vertical-align: bottom

Absolut eine innere div relativ zu ihrem Container positioniert

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

Multiple-Linien vertical-align: middle

<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 unterstützen muss <= 7

Um dies zu erhalten, richtig auf der ganzen Linie zu arbeiten, müssen Sie die CSS ein wenig hacken. Glücklicherweise gibt es einen IE-Bug, der zu unseren Gunsten arbeitet. Einstellen top:50% auf den Behälter und top:-50% auf der inneren div, können Sie das gleiche Ergebnis erzielen. Wir können die beiden mit einem anderen Merkmal kombinieren 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 vertical-align: middle

Diese Lösung erfordert einen etwas modernere Browser als die anderen Lösungen, wie er von der transform: translateY Eigenschaft macht. ( http://caniuse.com/#feat=transforms2d )

Anwendung der folgenden 3 Zeilen CSS auf ein Element wird vertikal zentriert es innerhalb der übergeordneten, unabhängig von der Höhe des Elternelements:

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

Answer 3

Ändern Sie Ihre div in einen flexiblen Behälter:

div {display:flex;}

Nun gibt es zwei Methoden, um die Ausrichtungen für alle Inhalte zum Zentrum:

Methode 1:

div {align-items:center;}

DEMO

---

Methode 2:

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

DEMO

---

Versuchen Sie unterschiedliche Breiten- und Höhenwerte auf den img und andere Schriftgröße Werte auf der span und Sie werden sehen, sie bleiben immer in der Mitte des Behälters.

Answer 4

Sie müssen anwenden vertical-align: middle auf beiden Elemente es perfekt zentriert worden sein.

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

Die Antwort akzeptiert wird das Symbol dreht sich um die Hälfte der x-Höhe des Textes daneben (wie definiert in der href="http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align" rel="noreferrer"> CSS-Spezifikationen). Die gut genug sein könnte, aber aus etwas aussehen kann, wenn der Text Oberlängen oder Unterlängen hat gerade oben oder unten stehend:

Auf der linken Seite wird der Text nicht ausgerichtet sind, auf der rechten Seite es, wie oben gezeigt. Eine Live-Demo finden Sie in diesem Artikel über vertical-align gefunden werden .

Hat jemand darüber, warum vertical-align: top Werken im Szenario gesprochen? Das Bild in der Frage ist wahrscheinlich größer als der Text und definiert damit die Oberkante des Zeilenbox. vertical-align: top auf dem span-Element positioniert dann nur um es an der Spitze des Leitungskasten.

Der wesentliche Unterschied im Verhalten zwischen vertical-align: middle und top ist, dass die ersten Schritte Elemente in Bezug auf die Grundlinie des Box (das, wo immer erforderlich platziert alle vertikalen Ausrichtungen zu erfüllen und so fühlt sich eher unberechenbar ) und die zweiten relativ zu den äußeren Begrenzungen des Zeilenfeldes (das ist greifbarer).

Answer 5

Die Technik in der akzeptierten Antwort verwendet funktioniert nur für einzeiligen Text ( Demo ) , aber nicht mehrzeiligen Text ( Demo .) - wie es bemerkt

Wenn jemand vertikal muss ein Bild, mehrzeiligen Text zu zentrieren, hier sind ein paar Möglichkeiten, (Verfahren 1 und 2 inspiriert von diesem CSS-Tricks-Artikel )

Methode # 1: CSS-Tabellen ( FIDDLE ) ( IE8 + ( caniuse ))

CSS:

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

Methode 2: Pseudoelement auf dem Behälter ( FIDDLE ) (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 ( FIDDLE ) (< a href = "http://caniuse.com/flexbox" rel = "noreferrer"> caniuse )

CSS (Die obige Geige enthält Verkäufer Präfixe):

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

Answer 6

Dieser Code funktioniert in IE sowie FF:

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

Answer 7

Da haben Sie die line-height auf die Höhe des div zu setzen, damit dies funktioniert

Answer 8

Im Grunde werden Sie bis zu CSS3 erhalten haben.

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

Answer 9

Für die Aufzeichnung Ausrichtung "Befehle" sollte auf einem SPAN nicht arbeiten, weil es einen In-Line Tag, keine Blockebene Tag. Dinge wie Ausrichtung, margin, padding, etc. werden nicht auf einem Inline-Tag arbeiten, weil der Punkt der Inline nicht den Textfluss zu stören.

CSS teilt HTML-Tags in zwei Gruppen: in-line und Blockebene. Suchen "CSS-Block vs inline" und ein großer Artikel erscheint ...

http://www.webdesignfromscratch.com/html-css / CSS-Block-and-inline /

(Kern CSS Prinzipien zu verstehen, ist ein Schlüssel, um es nicht ganz so aufdringlich zu sein)

Answer 10

Verwenden line-height:30px für die Spanne, so dass Text mit dem Bild auszurichten:

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

Answer 11

Eine andere Sache, die Sie tun können, ist der Text des line-height auf die Größe der Bilder innerhalb der <div> eingestellt. Dann stellen Sie die Bilder vertical-align: middle;

Das ist ernsthaft der einfachste Weg.

Answer 12

Hat eine Lösung mit margin in jedem dieser Antworten noch nicht gesehen, also hier ist meine Lösung für dieses Problem.

Diese Lösung funktioniert nur, wenn Sie die Breite des Bildes kennen.

Der HTML-Code

<div>
    <img src="https://placehold.it/80x80">
    <span>This is my very long text what should align. This is my very long text what should align.</span>
</div>

Die CSS

div {
  overflow:hidden;
}
img {
   width:80px
   margin-right:20px;
   display:inline-block;
   vertical-align:middle;
}
span {
   width:100%;
   margin-right:-100px;
   padding-right:100px;
   display:inline-block;
   vertical-align:middle;
   box-sizing:border-box;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
}

Answer 13

background:url(../images/red_bullet.jpg) left 3px no-repeat;

Ich verwende 3px im Allgemeinen anstelle von top. Durch die Erhöhung / diesen Wert abnimmt, kann das Bild auf die gewünschte Höhe verändert werden.

Answer 14

diese Spanne Eigenschaften schreiben

span{
    display:inline-block;
    vertical-align:middle;
}

Mit display:inline-block; Wenn Sie vertical-align property.Those verwenden assosiated Eigenschaften

Answer 15

Sie können einstellen Bild als inline element mit display Eigenschaft

<div>
  <img style="vertical-align: middle; display: inline;" src="https://placehold.it/60x60">
  <span style="vertical-align: middle; display: inline;">Works.</span>
</div>

Answer 16

Auf Knopfdruck in jQuery Mobile, zum Beispiel, können Sie es ein bisschen zwicken durch diesen Stil auf das Bild anwenden:

.btn-image {
    vertical-align:middle;
    margin:0 0 3px 0;
}

Answer 17

mehrzeilige Lösung:

http://jsfiddle.net/zH58L/6/

<div style="display:table;width:30px;height:160px;">
    <img style="display:table-cell;width:30px;height:60px;padding:50px" src='...' />
    <div style="display:table-cell;height:30px;vertical-align:middle">
      Multiline text centered vertically
    </div>
</div>
<!-- note: img (height + 2x padding) must be equal to root div height -->

Funktioniert in allen Browsern und ie9 +

Answer 18

Es kann verwirrend sein, ich bin einverstanden. Versuchen Tabellenfunktionen nutzen. Ich benutze diesen einfachen CSS Trick Modalverben in der Mitte der Webseite zu positionieren. Es hat große Browser-Unterstützung:

<div class="table">
    <div class="cell">
        <img src="..." alt="..." />
        <span>It works now</span>
    </div>
</div>

und CSS Teil:

.table { display: table; }
.cell { display: table-cell; vertical-align: middle; }

Beachten Sie, dass Sie Stil haben und die Größe des Bildes und Tabellencontainer anpassen, damit es funktioniert, wie Sie wünschen. Genießen Sie.

Answer 19

Zum einen Inline-CSS wird nicht empfohlen, es ist wirklich vermasseln Ihre HTML.

Zur Ausrichtung Bild und Spannweite, können Sie einfach vertical-align:middle tun.

.align-middle {
  vertical-align: middle;
}

<div>
  <img class="align-middle" src="https://i.stack.imgur.com/ymxaR.png">
  <span class="align-middle">I'm in the middle of the image! thanks to CSS! hooray!</span>
</div>

Answer 20

Sie wollen wahrscheinlich so aus:

<div>
   <img style="width:30px; height:30px;">
   <span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>

Wie andere vorgeschlagen haben, versuchen vertical-align auf das Bild:

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

CSS ist nicht störend. Sie lesen gerade nicht der Dokumentation . ; P