Jak wyśrodkować tekst w pionie dużą czcionką-niesamowita ikona?

Musiałam to zrobić sama, ty musisz to zrobić na odwrót.

• nie baw się pionowym wyrównaniem tekstu
• graj z pionowym wyrównaniem czcionki-awesome icon

<div>
  <span class="icon icon-2x icon-camera" style=" vertical-align: middle;"></span>
  <span class="my-text">hello world</span>
</div>

Oczywiście nie można używać stylów inline i kierować go za pomocą własnej klasy css. Ale to działa w sposób kopiuj wklej.

Zobacz tutaj: wyrównanie w pionie tekstu i ikony w przycisku bootstrap

Gdyby to zależało ode mnie, nie używam icon-2x. i po prostu sam podaj rozmiar czcionki, jak w poniższym

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

Aby zobaczyć przykład pracy, Zobacz http://jsfiddle.net/3GMjp/77/

Używam ikon obok tekstu w 99% przypadków, więc dokonałem zmiany globalnie:

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

Dodaj 3x, 4x itp. do tej samej definicji, co jest potrzebne.

Jeśli rzeczy nie ustawiają się w kolejce, prosty line-height: inherit; za pomocą CSS na określonych elementach i. fa, które mają problemy z wyrównaniem, może zrobić sztuczkę wystarczy.

Można również użyć globalnego rozwiązania, które ze względu na nieco wyższą specyfikę CSS nadpisze FontAwesome .reguła fa określająca line-height: 1 bez wymogu !important Na Nieruchomości:

i.fa {
  line-height: inherit;
}

Upewnij się tylko, że powyższe globalne rozwiązanie nie powoduje żadnych innych problemów w miejscach, w których możesz również użyć FontAwesome ikony.

Opcja flexbox

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>

Fiddle

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

Najprostszym sposobem jest ustawienie właściwości CSS vertical-align na middle

i.fa {
    vertical-align: middle;
}

Dobrze mi to wyszło.

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

Inną opcją dostrajania wysokości linii ikony jest użycie procentu właściwości vertical-align. Zazwyczaj 0% jest na dole, a 100% na górze, ale można użyć wartości ujemnych lub więcej niż sto, aby stworzyć ciekawe efekty.

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

Spróbuj ustawić ikonę jako height: 100%

Nie musisz nic robić z opakowaniem (powiedzmy Twoim guzikiem).

To wymaga Font Awesome 5. Nie wiem, czy to działa dla starszych wersji FA.

.wrap svg {
    height: 100%;
}

Zauważ, że ikona jest w rzeczywistości grafiką svg.

Demo

Chciałbym zawinąć tekst w taki sposób, że można go celować oddzielnie. Teraz, jeśli pływasz zarówno w lewo, jak i w lewo, możesz użyć wysokości linii do kontrolowania pionowego odstępu . Ustawienie go na taką samą wysokość jak (30px) spowoduje wyrównanie go w środku. Zobacz tutaj: http://jsfiddle.net/F3KyK/4/

Nowy Znacznik:

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

Nowy CSS:

div {
    border: 1px solid #ccc;
    height: 30px;
    margin: 60px;
    padding: 4px;
    vertical-align: middle;
}
i{
    float: left;
}
#text{
    line-height: 30px;
    float: left;
}

Przy użyciu flexboxa wyrównanie w pionie ikon czcionek obok tekstu może być bardzo trudne. Próbowałem marginesów i wyściółek, ale to przesunęło wszystkie elementy. Próbowałem różnych wyrównań elastycznych, takich jak Centrum, początek, linia bazowa itp. Najprostszym i najczystszym sposobem dostosowania tylko ikony było ustawienie, że zawiera div na position: relative; top: XX; to wykonało zadanie idealnie.

Czcionki mają rozwiązanie w standardzie, używam go, gdy muszę wyśrodkować ikonę w łańcuchu: https://fontawesome.com/how-to-use/svg-with-js