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

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.

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

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.

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

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.

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/

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

i.fa {
    vertical-align: middle;
}

Das hat bei mir gut funktioniert.

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

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

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
}

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

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

<span class="align-middle"><i class="fas fa-camera"></i></span>

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.

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

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

div .icon {
   vertical-align: middle;
}