Text neben einem Bild vertikal ausrichten?

Warum vertical-align: middlefunktioniert das nicht ? Und doch vertical-align: top tut Arbeit.

span{
  vertical-align: middle;
}

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

In diesem Fall ist es eigentlich ganz einfach: Wenden Sie die vertikale Ausrichtung auf das Bild an. Da alles in einer Zeile steht, ist es wirklich das Bild, das Sie ausrichten möchten, 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>

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

Einzeilige vertikale Ausrichtung: Mitte

Dieser ist einfach: Stellen Sie die Zeilenhöhe des Textelements auf die des Containers ein

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

Mehrzeilige vertikale Ausrichtung: unten

Positionieren Sie ein inneres Div absolut 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>

Mehrzeilige vertikale Ausrichtung: 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

Damit dies auf der ganzen Linie richtig funktioniert, müssen Sie das CSS ein wenig hacken. Glücklicherweise gibt es einen IE-Fehler, der zu unseren Gunsten wirkt. Wenn Sie top:50%den Behälter und top:-50%den inneren Teil einstellen, können Sie das gleiche Ergebnis erzielen. Wir können beide mit einer anderen Funktion kombinieren, die der 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 erfordert einen etwas moderneren Browser als die anderen Lösungen, da sie die transform: translateYEigenschaft nutzt . ( http://caniuse.com/#feat=transforms2d )

Durch Anwenden der folgenden 3 CSS-Zeilen auf ein Element wird es unabhängig von der Höhe des übergeordneten Elements vertikal in seinem übergeordneten Element zentriert:

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

Verwandeln Sie Ihre divin 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 unterschiedliche Werte für Breite und Höhe imgund unterschiedliche Werte für die Schriftgröße aus spanund Sie werden sehen, dass sie immer in der Mitte des Containers bleiben.

Sie müssen auf vertical-align: middlebeide Elemente anwenden , damit sie perfekt zentriert sind.

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

Die akzeptierte Antwort zentriert das Symbol um die Hälfte der x-Höhe des Textes daneben (wie in den CSS-Spezifikationen definiert ). Das mag gut genug sein, kann aber ein wenig abweichen, wenn der Text Auf- oder Abwärtsbewegungen aufweist, die ganz oben oder unten hervorstechen:

Links ist der Text nicht ausgerichtet, rechts ist er wie oben gezeigt. Eine Live-Demo finden Sie in diesem Artikel zum Thema vertikale Ausrichtung .

Hat jemand darüber gesprochen, warum vertical-align: topdas Szenario funktioniert? Das Bild in der Frage ist wahrscheinlich größer als der Text und definiert somit den oberen Rand des Linienfelds. vertical-align: topauf dem span-Element positioniert es dann einfach oben im Linienfeld.

Der Hauptunterschied im Verhalten zwischen vertical-align: middleund topbesteht darin, dass das erste Element relativ zur Grundlinie des Felds (das dort platziert wird, wo es benötigt wird, um alle vertikalen Ausrichtungen zu erfüllen, und sich daher eher unvorhersehbar anfühlt ) und das zweite Element relativ zu den äußeren Grenzen des Linienfelds (dh) verschoben wird greifbarer).

Die in der akzeptierten Antwort verwendete Technik funktioniert nur für einzeiligen Text ( Demo ), nicht jedoch für mehrzeiligen Text ( Demo ) - wie dort angegeben.

Wenn jemand mehrzeiligen Text vertikal auf ein Bild zentrieren muss, gibt es einige Möglichkeiten (Methoden 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 Container ( 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 ) ( caniuse )

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

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

Dieser Code funktioniert sowohl im IE als auch im FF:

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

Weil Sie line-heightdie Höhe des Div einstellen müssen, damit dies funktioniert

Grundsätzlich müssen Sie sich auf CSS3 konzentrieren.

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

Für den Datensatz sollten Ausrichtungsbefehle in einem SPAN nicht funktionieren, da es sich um ein Inline- Tag und nicht um ein Tag auf Blockebene handelt . Dinge wie Ausrichtung, Rand, Auffüllen usw. funktionieren bei einem Inline-Tag nicht, da der Inline-Punkt den Textfluss nicht stören soll.

CSS unterteilt HTML-Tags in zwei Gruppen: Inline- und Block-Ebene. Suchen Sie nach "CSS Block vs Inline" und ein großartiger Artikel wird angezeigt ...

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

(Das Verständnis der wichtigsten CSS-Prinzipien ist ein Schlüssel dafür, dass es nicht so nervig ist.)

Verwenden Sie diese line-height:30pxOption, damit der Text am Bild ausgerichtet wird:

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

Sie können den Text auch line-heightauf die Größe der Bilder innerhalb von einstellen <div>. Stellen Sie dann die Bilder auf einvertical-align: middle;

Das ist im Ernst der einfachste Weg.

Ich habe marginin keiner dieser Antworten eine Lösung gefunden. Hier ist meine Lösung für dieses Problem.

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

Der HTML

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

Das 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;
}

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

Ich benutze in der Regel 3px anstelle von top. Durch Erhöhen / Verringern dieses Werts kann das Bild auf die erforderliche Höhe geändert werden.

Schreiben Sie diese Span-Eigenschaften

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

Verwendung display:inline-block;Wenn Sie vertical-alignEigenschaft verwenden. Dies sind zugeordnete Eigenschaften

Sie können Bild , wie sie inline elementunter Verwendung von displayEigentum

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

Auf einer Schaltfläche in jQuery Mobile können Sie sie beispielsweise ein wenig optimieren, indem Sie diesen Stil auf das Bild anwenden:

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

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 Browers und ie9 +

Es kann verwirrend sein, da stimme ich zu. Versuchen Sie, Tabellenfunktionen zu verwenden. Ich benutze diesen einfachen CSS-Trick, um Modalitäten 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 die Größe des Bild- und Tabellencontainers formatieren und anpassen müssen, damit es wie gewünscht funktioniert. Genießen.

Erstens Inline-CSS nicht empfohlen, es bringt Ihr HTML wirklich durcheinander.

Zum Ausrichten von Bild und Spanne können Sie dies einfach tun vertical-align:middle.

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

Ich bin mir nicht sicher, warum es nicht im Browser Ihrer Navigation gerendert wird, aber ich verwende normalerweise ein solches Snippet, wenn ich versuche, eine Kopfzeile mit einem Bild und einem zentrierten Text anzuzeigen. Ich hoffe, es hilft!

https://output.jsbin.com/jeqorahupo

            <hgroup style="display:block; text-align:center;  vertical-align:middle;  margin:inherit auto; padding:inherit auto; max-height:inherit">

            <header style="background:url('http://lorempixel.com/30/30/') center center no-repeat; background-size:auto; display:inner-block; vertical-align:middle; position:relative; position:absolute; top:inherit; left:inherit; display: -webkit-box; display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-flex-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;">

            <image src="http://lorempixel.com/60/60/" title="Img title" style="opacity:0.35"></img>
                    http://lipsum.org</header>
                    </hgroup>

Sie wollen wahrscheinlich das:

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

Probieren Sie vertical-aligndas Bild an, wie andere vorgeschlagen haben :

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

CSS ist nicht ärgerlich. Sie lesen die Dokumentation einfach nicht . ; P.