Text neben einem Bild vertikal ausrichten?

1967

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>

Sam
quelle
12
Hier ist ein interessanter Artikel: Verständnisvertical-align
Phaedrus

Antworten:

2253

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>

Michael Haren
quelle
188
"Da alles in einer Zeile steht, ist es wirklich das Bild, das Sie ausrichten möchten, nicht der Text." - Nein, das Bild ist dort gut, wo es ist. Wir möchten, dass der Text ausgerichtet wird. Nicht das Bild. - Ich verstehe, dass dies funktioniert (unter bestimmten Umständen, z. B. wenn Sie nicht "float: left" für das Bild verwenden ...), aber es ist nur bizarr und nicht intuitiv, den Text physisch in die vertikale Mitte zu verschieben müsste stattdessen ein Attribut auf das Bild daneben anwenden.
BrainSlugs83
35
@ BrainSlug83 Es ist sicherlich nicht bizarr, aber ich kann sehen, wie Neulinge dadurch gestolpert werden können. Standardmäßig wird ein Bild auf der Textgrundlinie platziert. Sie bewegen sich lediglich dorthin, wo das Bild relativ zum Text angehängt ist. Bei Verwendung von float: left sollten Sie dies entweder für den Block tun, der das Bild und den Text enthält, oder für den Text selbst.
Jamesrom
14
@ BrainSlugs83 Einverstanden, dass es als kontraintuitiv angesehen werden kann. Es dauert eine kleine mentale Verschiebung, denn laut CSS müssen Sie das Bild auf den Text zentrieren. Nicht der Text zum Bild.
Greg Pettit
6
Es funktioniert nicht, wenn Sie die spanSchriftgröße erhöhen . Siehe meine Antwort .
Mori
2
Aber wenn Sie die Bildgröße auf eine kleinere (wie width:16px;height:16px) einstellen , können Sie sehen, dass das Bild zu niedrig ist ...
Matthieu Charbonnier
340

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%);
Adam Lassek
quelle
15
Die display:tableund display:table-cellCSS-Selektoren funktionieren hervorragend, außer natürlich in IE7 und darunter. Nachdem ich mir einige Stunden lang die Haare ausgerissen hatte, entschied ich, dass ich mich nicht wirklich mit jemandem befassen musste, der noch IE7- verwendete.
Banncee
2
display:tableIn einigen Browsern gibt es einige Einschränkungen (in IE11 max-heightfunktioniert dies nicht, wenn sich das Element in einer Tabellenzelle befindet). In einigen Randfällen ist es daher keine gute Idee, die vertikale Ausrichtung mithilfe von Tabellenzellen durchzuführen.
Jahu
97

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.

Mori
quelle
Um den Text neben oder zwischen Bildern (horizontal auf der Seite) zu justify-content: center;zentrieren , müssen Sie auch hinzufügen und für den Abstand (ohne Verwendung von <br/> Tags) möchten Sie möglicherweise auch ein Bild einfügen padding: 1em;. Tolles Update für uns moderne Browser-Entwickler.
CSS
Das hat gut funktioniert. Ich habe jede der anderen Antworten ausprobiert, und obwohl sie bis zu einem gewissen Grad gearbeitet haben, hat es bei mir nicht funktioniert. Ich musste ungefähr 3 Textzeilen ausrichten, und diese Antwort funktionierte perfekt. Danke @Mori
semaj0
87

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:

Vergleich der zentrierten Symbole

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

christopheraue
quelle
1
Ich bemerkte oben und unten, aber nicht in der Mitte. Grundsätzlich ist die "Mitte" nicht als Mitte zwischen oben und unten definiert. Es bedeutet mehr: "Wenn es größer als Text ist, ragen Sie in beide Richtungen gleichermaßen heraus." Und hier brauchen Sie keine vertikale Ausrichtung: Mitte des Textes, nur das Bild.
Curtis
61

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 */
}
Danield
quelle
3
Die Methoden funktionieren einwandfrei, wenn das Bild größer (in der Höhe) als der Text ist. Aber wenn das Bild kleiner ist, scheitern alle bis auf das letzte leider
Thomas
28

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>
HTMLnewBie
quelle
19

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

Ikke
quelle
2
Ich habe versucht, die Zeilenhöhe auf 30px einzustellen, aber es funktioniert immer noch nicht.
Sam
12

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

-moz-box-align: center;
-webkit-box-align: center;
Dan
quelle
11

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

David
quelle
2
text-alignund vertical-align(mit Ausnahme ihrer Anwendung auf tdElemente zum Zweck legacy) für speziell gemeint inlineund inline-blockElemente ( span, imgusw.).
Kevin Peno
11

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>
Touhid Rahman
quelle
11

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.

nullpoint81
quelle
3
Beachten Sie, dass dies nicht richtig funktioniert, wenn Ihr Inhalt über mehrere Zeilen verteilt ist.
Ahmad Alfy
und warum dann nicht einfach die Zeilenhöhe: 100%?
Jean Paul AKA el_vete
8

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;
}
Fleuv
quelle
1
Hier ist die genaue Lösung. Es funktioniert auch für mehrzeilige Texte ... Die oben genannten sind für mehrzeilige Texte nicht geeignet.
Efirat
6
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.

AspiringCanadian
quelle
Hilft nicht in Situationen, in denen die Bildgröße unbekannt oder dynamisch ist.
Dan
6

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

Mr. Pandya
quelle
6

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>

Super User
quelle
3

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;
}
den232
quelle
2

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 +

Benjamin Crouzier
quelle
2

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.

CodeGems
quelle
0

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>

Alireza
quelle
2
Es gibt viele gute Gründe, Inline-CSS zu verwenden. Reagieren: CSS in JS zum Beispiel.
Jlyonsmith
0

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>
Jean Paul AKA el_vete
quelle
-4

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.

Strager
quelle
6
Und wenn die Bildhöhe dynamisch ist? Ich bin beschissen :( PS, nur weil Dokumentation für CSS existiert, macht es nicht ärgerlich oder unintuitiv.
Sam
Meinst du nervig und intuitiv? Sie haben in Ihrer Frage nicht angegeben, ob die Höhe des Bildes überhaupt dynamisch ist, daher habe ich angenommen, dass Sie sich an die feste Höhe halten würden.
Strager
2
Ich bin mit Sam in diesem Fall. Ich nahm an, dass Gegenstände mit der Höhe zentriert werden sollten, die sich herausstellte. Ich denke, wir könnten es alle ertragen, uns etwas abzukühlen.
Michael Haren