Wie zentriere ich Text vertikal mit einem großen Symbol für großartige Schriftarten?

230

Nehmen wir an, ich habe eine Bootstrap-Schaltfläche mit einem fantastischen Symbol und etwas Text:

<div>
    <i class='icon icon-2x icon-camera'></i>
    hello world
</div>

Wie lasse ich Text vertikal zentriert erscheinen? Der Text wird jetzt am unteren Rand des Symbols ausgerichtet: http://jsfiddle.net/V7DLm/1/

BEARBEITEN: Ich habe eine mögliche Lösung : http://jsfiddle.net/CLdeG/1/, aber es fühlt sich ein bisschen hackig an - führt ein zusätzliches p-Tag ein, verwendet Pull-Left und display: table. Vielleicht kann jemand einen einfacheren Weg vorschlagen.

Paul
quelle
2
Du bist ein Gott. Im Ernst, ich habe heute 2 Stunden damit verbracht, Ihre Lösung war bei weitem die sauberste. Sie müssen nichts fest codieren.
Chuck
Dieser Ansatz ist einfacher
Raveen Beemsingh

Antworten:

304

Ich musste das nur selbst machen, du musst es umgekehrt machen.

  • Spielen Sie nicht mit der vertikalen Ausrichtung Ihres Textes
  • Spielen Sie mit der vertikalen Ausrichtung des Font-Awesome-Symbols
<div>
  <span class="icon icon-2x icon-camera" style=" vertical-align: middle;"></span>
  <span class="my-text">hello world</span>
</div>

Natürlich können Sie keine Inline-Stile verwenden und diese mit Ihrer eigenen CSS-Klasse ausrichten. Dies funktioniert jedoch beim Kopieren und Einfügen.

Siehe hier: Vertikale Ausrichtung von Text und Symbol in der Schaltfläche

Wenn es nach mir ginge, würde ich das icon-2x nicht verwenden. Und geben Sie einfach die Schriftgröße selbst an, wie im Folgenden

<div class='my-fancy-container'>
    <span class='my-icon icon-file-text'></span>
    <span class='my-text'>Hello World</span>
</div>
.my-icon {
    vertical-align: middle;
    font-size: 40px;
}

.my-text {
    font-family: "Courier-new";
}

.my-fancy-container {
    border: 1px solid #ccc;
    border-radius: 6px;
    display: inline-block;
    margin: 60px;
    padding: 10px;
}

Ein funktionierendes Beispiel finden Sie unter JsFiddle

andxyz
quelle
1
Ja, das ist eine bessere Lösung, danke. Scheint immer noch Zeilenhöhe
Paul
1
Ich habe deine jsfiddle dahingehend aktualisiert, wie ich es machen würde. Ich habe die Schriftgröße für das Symbol verwendet, anstatt die 2x zu verwenden. jsfiddle.net/3GMjp/1
andxyz
In Ihrem ersten Code entspricht das Start-Tag <span> nicht dem Tag </ i>.
Jzacharuk
Funktioniert nicht mit einigen Symbolen. fa-Winkel-links Beispiel
Steakchaser
Es ist wichtig zu wissen, dass das Einfügen der fontawesome js-Dateien auch das Aussehen verändern kann. Mein Symbol war zu weit oben, ich habe die js-Aufnahme gelöscht, um zu sehen, was passieren würde, und jetzt ist es zu weit unten -.-
lucidbrot
53

Ich verwende 99% der Zeit Symbole neben Text, daher habe ich die Änderung global vorgenommen:

.fa-2x {
  vertical-align: middle;
}

Fügen Sie der gleichen Definition nach Bedarf 3x, 4x usw. hinzu.

Rush Frisby
quelle
7
Meiner Meinung nach sollte dies die akzeptierte Antwort sein, da dies bei weitem die einfachste Lösung ist, es sei denn, ich vermisse etwas in der ursprünglichen Frage. Danke @rushonerok! Ich bin mir nicht sicher, warum manche Leute sagen, dass sie nicht verwenden sollen vertical-align: middle;- mir fehlt hier möglicherweise etwas. Bitte erklären Sie, wenn ja.
Kendall
1
@ Kendall Roth Ich denke, wenn Leute sagen, nicht zu verwenden vertical-align: middle, meinen sie, wenn Sie blockElemente verwenden . Wenn Sie verwenden inline, inline-blockoder table-cell, sollten Sie gut sein. MDN:vertical-align
Rinogo
Funktioniert wie Charme! Vielen Dank: D
Mohammed A. Fadil
37

Nachdem alle vorgeschlagenen Optionen berücksichtigt wurden, scheint die sauberste Lösung darin zu bestehen, die Linienhöhe einzustellen und alles vertikal auszurichten:

Siehe Jsfiddle Demo

CSS:

div {
    border: 1px solid #ccc;
    display: inline-block;
    height: 50px;
    margin: 60px;
    padding: 10px;
}
#text, #ico {
    line-height: 50px;
}

#ico {
    vertical-align: middle;
}
Paul
quelle
2
Was ist, wenn Ihr Container größer als 50 Pixel ist? Dann wird es nicht funktionieren ... Ich habe Inhalte, deren Größe sich ändert, und es sollte ein zentriertes Symbol enthalten ... Irgendeine Idee dazu?
Slaven Tomac
24

Wenn die Dinge nicht in einer line-height: inherit;Reihe stehen , kann ein einfaches Via über CSS für bestimmte i.fa-Elemente, bei denen Ausrichtungsprobleme auftreten, den Trick einfach genug tun.

Sie können auch eine globale Lösung verwenden, die aufgrund einer etwas höheren CSS-Spezifität die .fa-Regel von FontAwesome überschreibt, die angibt, line-height: 1ohne dass !importantfür die Eigenschaft Folgendes erforderlich ist :

i.fa {
  line-height: inherit;
}

Stellen Sie einfach sicher, dass die oben genannte globale Lösung keine anderen Probleme an Stellen verursacht, an denen Sie möglicherweise auch FontAwesome-Symbole verwenden.

Purefusion
quelle
16

eine Flexbox-Option - Font Awesome 4.7 und darunter

Gehostete FA 4.x-URL - https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

div {
  display: inline-flex; /* make element size relative to content */
  align-items: center; /* vertical alignment of items */
  line-height: 40px; /* vertically size by height, line-height or padding */
  padding: 0px 10px; /* horizontal with padding-l/r */
  border: 1px solid #ccc;
}

/* unnecessary styling below, ignore */
body {display: flex;justify-content: center;align-items: center;height: 100vh;}div i {margin-right: 10px;}div {background-color: hsla(0, 0%, 87%, 0.5);}div:hover {background-color: hsla(34, 100%, 52%, 0.5);cursor: pointer;}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
    <i class='fa fa-2x fa-camera'></i>
    hello world
</div>

Geige

http://jsfiddle.net/Hastig/V7DLm/180/


mit flex und font awesome 5

Gehostete FA 5.x-URL - https://use.fontawesome.com/releases/v5.0.8/js/all.js

div {
  display: inline-flex; /* make element size relative to content */
  align-items: center; /* vertical alignment of items */
  padding: 3px 10px; /* horizontal vertical position with padding */
  border: 1px solid #ccc;
}
.svg-inline--fa { /* target all FA icons */
  padding-right: 10px;
}
.icon-camera .svg-inline--fa { /* target specific icon */
  font-size: 50px;
}
/* unnecessary styling below, ignore */
body {display: flex;justify-content: center;align-items: center;height: 100vh; flex-direction: column;}div{margin: 10px 0;}div {background-color: hsla(0, 0%, 87%, 0.5);}div:hover {background-color: hsla(212, 100%, 63%, 1);cursor: pointer;}
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div class="icon-camera">
    <i class='fas fa-camera'></i>
    hello world
</div>
<div class="icon-clock">
    <i class='fas fa-clock'></i>
    hello world
</div>

Geige

https://jsfiddle.net/3bpjvof2/

Hastig Zusammenstellen
quelle
1
Dies kann ein Symbol vertikal innerhalb eines Div zentrieren, nicht nur innerhalb einer Textzeile. Funktioniert super!
Sean the Bean
@ wer immer versucht, dies zu bearbeiten - dies ist im Allgemeinen mein Layoutstil für Antworten. Ich glaube, es macht es lesbarer / verständlicher und ermöglicht es den Leuten, besser zu wissen, wohin sie gehen, bevor sie auf den Link klicken. Bei der von FA gehosteten URL haben einige Benutzer die Angewohnheit, einen Link zum Kopieren hervorzuheben. Aus diesem Grund ist er vollständig geschrieben. Die jsfiddle-Links haben eine Kopfzeile, um die Seite besser aufzuteilen. Andernfalls ist es leichter zu übersehen und die Antworten können unübersichtlich aussehen.
Hastig Zusammenstellen
11

Am einfachsten ist es, die CSS-Eigenschaft "Vertikal ausrichten" auf "Mitte" zu setzen

i.fa {
    vertical-align: middle;
}
ajaali
quelle
3
.svg-inline--fafür FontAwesome 5
Darylknight
@darylknight, was bedeutet das? Wie würde ich das aktivieren / nutzen? Etwas nach meinem fa-clockin der Klasse hinzufügen?
Prof. Falken Vertrag verletzt
5

Das hat bei mir gut funktioniert.

i.fa {
  line-height: 100%;
}
Tom
quelle
3

Versuchen Sie, Ihr Symbol als festzulegen height: 100%

Sie müssen nichts mit dem Wrapper tun (z. B. Ihre Schaltfläche).

Dies erfordert Font Awesome 5. Nicht sicher, ob es für ältere FA-Versionen funktioniert.

.wrap svg {
    height: 100%;
}

Beachten Sie, dass das Symbol tatsächlich eine svgGrafik ist.

Demo

mriiiron
quelle
1

Eine weitere Option zur Feinabstimmung der Zeilenhöhe eines Symbols ist die Verwendung eines Prozentsatzes der vertical-alignEigenschaft. Normalerweise ist 0% unten und 100% oben, aber man könnte negative Werte oder mehr als hundert verwenden, um interessante Effekte zu erzielen.

.my-element i.fa {
    vertical-align: 100%; // top
    vertical-align: 50%; // middle
    vertical-align: 0%; // bottom
}
Arian Acosta
quelle
1

Ich würde den Text in ein einschließen, damit Sie ihn separat ausrichten können. Wenn Sie nun beide und links schweben, können Sie die Zeilenhöhe verwenden, um den vertikalen Abstand des zu steuern. Wenn Sie es auf die gleiche Höhe wie (30px) einstellen, wird es in der Mitte ausgerichtet. Siehe hier .

Neues Markup:

 <div>
    <i class='icon icon-2x icon-camera'></i>
    <span id="text">hello world</span>
</div>

Neues CSS:

div {
    border: 1px solid #ccc;
    height: 30px;
    margin: 60px;
    padding: 4px;
    vertical-align: middle;
}
i{
    float: left;
}
#text{
    line-height: 30px;
    float: left;
}
Webster Gordon
quelle
4
Vertikal ausrichten bewirkt nichts für Blockelemente, sondern nur für Inline- oder Tabellenzellenelemente.
Cimmanon
Ich sehe, das Setzen von Zeilenhöhe = Containerhöhe und schwebenden Dingen funktioniert und erfordert weniger Eingabe. Hier ist eine aktualisierte Geige mit reduziertem Rauschen: jsfiddle.net/F3KyK/7
Paul
Es ist besser, nur vertical-align: middledas Symbol und den Text festzulegen. Auf diese Weise machen Sie keine Annahmen über die Symbolhöhe und es gibt weniger CSS.
Maros
1

Für diejenigen, die Bootstrap 4 verwenden, ist dies einfach:

<span class="align-middle"><i class="fas fa-camera"></i></span>
nscherzer
quelle
Dies hat keine Verwendung als vertikale Ausrichtung: Die von dieser Klasse angewendete Mitte zielt nur auf Tabellen ab.
Lucas Manzke
0

Bei Verwendung einer Flexbox kann die vertikale Ausrichtung von Schriftarten-Symbolen neben Text sehr schwierig sein. Ich habe versucht, Ränder und Polster zu verwenden, aber dadurch wurden alle Elemente verschoben. Ich habe verschiedene Flex-Alignments wie Center, Start, Baseline usw. ohne Erfolg ausprobiert. Der einfachste und sauberste Weg, nur das Symbol anzupassen, bestand darin, das enthaltende div auf zu setzen. position: relative; top: XX;Dies hat den Job perfekt gemacht.

ADP
quelle
0

Nun, diese Frage wurde vor Jahren gestellt. Ich denke, die Technologie hat sich ziemlich verändert und die Browserkompatibilität ist viel besser. Sie könnten die vertikale Ausrichtung verwenden, aber ich würde davon ausgehen, dass einige weniger skalierbar und weniger wiederverwendbar sind. Ich würde eine Flexbox empfehlen Ansatz .

Hier ist das gleiche Beispiel des Originalplakats, jedoch mit Flexbox. Es wird ein einzelnes Element formatiert. Wenn sich die Größe einer Schaltfläche aus irgendeinem Grund ändert, wird sie weiterhin vertikal und horizontal zentriert.

.button {
    border: 1px solid #ccc;
    height: 40px;
    margin: 60px;
    padding: 4px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

Beispiel: JsFiddle

Ian Donahue
quelle
0

Definieren Sie einfach die vertical-alignEigenschaft für das Symbolelement:

div .icon {
   vertical-align: middle;
}
ali6p
quelle