it-swarm.com.de

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

Nehmen wir an, ich habe einen Bootstrap-Button mit einem font-awesome Symbol und etwas Text:

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

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

EDIT: Ich habe eine mögliche solution: http://jsfiddle.net/CLdeG/1/ aber es fühlt sich ein bisschen hackig an - führt zusätzliche p-Tags ein links und Anzeige: Tabelle. Vielleicht kann jemand einen leichteren Weg vorschlagen.

202
Paul

Nach Prüfung aller vorgeschlagenen Optionen scheint die sauberste Lösung die Einstellung der Zeilenhöhe und die vertikale Ausrichtung aller Elemente zu sein:

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

Ich musste das nur selbst machen, Sie müssen es andersherum machen.

  • nicht Spielen Sie mit der vertikalen Ausrichtung Ihres Textes
  • spielen Sie mit dem vertikalen Ausrichten des Symbols "Schriften"
<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 anvisieren. Dies funktioniert jedoch auf eine Art und Weise des Einfügens von Kopien.

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

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

<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 Arbeitsbeispiel finden Sie unter http://jsfiddle.net/3GMjp/77/

260
andxyz

Ich verwende in 99% der Fälle Symbole neben Text und habe die Änderung global vorgenommen:

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

Fügen Sie der gewünschten Definition 3x, 4x usw. hinzu.

44
Rush Frisby

wenn sich die Dinge nicht in einer Reihe befinden, könnte ein einfacher line-height: inherit; über CSS auf 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 line-height: 1 angibt, ohne dass !important für die Eigenschaft erforderlich ist:

i.fa {
  line-height: inherit;
}

Stellen Sie nur sicher, dass die obige globale Lösung keine anderen Probleme an Orten verursacht, an denen Sie möglicherweise FontAwesome-Symbole verwenden.

21
purefusion

eine Flexbox-Option - Font Awesome 4.7 und darunter

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="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<div>
    <i class='icon icon-2x icon-camera'></i>
    hello world
</div>

Geige

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


mit flex und font awesome 5

FA Hosted 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;
}
11
ajaali

Das hat gut für mich funktioniert.

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

Setze dein Icon als height: 100%.

Sie müssen mit dem Wrapper nichts anfangen (sagen Sie zum Beispiel Ihren Button).

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

.wrap svg {
    height: 100%;
}

Beachten Sie, dass das Symbol eine svg-Grafik ist.

Demo

2
mriiiron

Eine weitere Option zum Optimieren der Zeilenhöhe eines Symbols besteht in der Verwendung eines Prozentsatzes der vertical-align-Eigenschaft. Normalerweise ist 0% am unteren Ende und 100% am oberen Ende. Man kann jedoch negative Werte oder mehr als 100 verwenden, um interessante Effekte zu erzielen.

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

Ich würde den Text in a einpacken, damit Sie ihn separat anvisieren können. Wenn Sie jetzt sowohl links als auch links schweben, können Sie die vertikale Höhe der Linie mit der Linienhöhe steuern. Wenn Sie ihn auf die gleiche Höhe wie (30px) einstellen, wird er in der Mitte ausgerichtet. Siehe hier: http://jsfiddle.net/F3KyK/4/

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;
}
0
Webster Gordon

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

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

Wenn Sie eine Flexbox verwenden, kann die vertikale Ausrichtung von Symbolen für Schriftarten neben Text sehr schwierig sein. Ich habe Ränder und Polsterungen ausprobiert, aber das bewegte alle Gegenstände. Ich habe verschiedene Flex-Alignments wie Center, Start, Baseline usw. ausprobiert, ohne Erfolg. Der einfachste und sauberste Weg, nur das Symbol anzupassen, bestand darin, dass es div auf position: relative; top: XX; enthielt. Dies erledigte die Aufgabe perfekt.

0
ADP