字體awesom圖標對齊

我嘗試將三個fa圖標排成一行，以便它們具有相同的高度。問題是，即使我手動設置它們的大小（通過font-size屬性），它們也不會對齊（我需要它們大約爲11px）。我一直在嘗試改變他們的位置以及相當長的時間。什麼是結果：字體awesom圖標對齊

.trash { 
 
    position: relative; 
 
    font-size: 11px; 
 
} 
 
.upload { 
 
    position: relative; 
 
    font-size: 11px; 
 
} 
 
.download { 
 
    position: relative; 
 
    top: 1px; 
 
    font-size: 11px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 
<i class="fa fa-download download"></i> 
 
<i class="fa fa-upload upload"></i> 
 
<i class="fa fa-trash trash"></i>

顯然，他們不對齊。是否有可能讓他們更「平等」？我知道類似的問題已經被問到，但他們並沒有真正幫助我。

來源

2016-09-28 makar

我認爲你的圖標是在你設置頂部：1px下載後對齊的。我爲[https://jsfiddle.net/tjbaezid/bu0ufmse/2/]設置了一行[ –

]恐怕偏移量在caracter本身中。您必須專門針對每個不具有相同高度的字符。 –

由於所有的字符都沒有相同的基線，所以您必須單獨使用每個字符。在我的例子中的紅色邊框顯示它。這是我能做的最好的，我將font-size設置爲30px以檢查對齊。

.icons { 
 
    font-size: 30px; 
 
    } 
 

 
.fa { 
 
    border-top: 1px red solid; 
 
    border-bottom: 1px red solid; 
 
} 
 

 
.download { 
 
    position: relative; 
 
    top: 0.07em; 
 
} 
 
.download:before { 
 
    font-size: 1.06em; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> 
 
<div class="icons"> 
 
    <i class="fa fa-download fa-4x download"></i> 
 
    <i class="fa fa-upload fa-4x upload"></i> 
 
    <i class="fa fa-trash fa-4x trash"></i> 
 
</div>

使用相對字體大小（em單元），用於調整，這將是什麼字體大小是相同的。

來源

2016-09-28 13:56:46

指出基線問題的榮譽，並非所有的圖標都是相同的！ – lharby

最簡單的方法是給他們所有的固定寬度和中心文本對齊方式：

.fa { 
    text-align: center; 
    width: 16px; 
}

當然你需要玩的寬度得到它看你想用你的方式所需的字體大小。

Modified JSFiddle demo。

前：

Before

後：

After

來源

2016-09-28 12:04:17

不是，OP想要**高度**而不是相同的寬度...... –

@AlFoиceѫ在OP的示例中，圖標的高度相同。 http://i.imgur.com/iua2FCf.png –

每個字體caracter都沒有相同的高度和相同的basemine。放大你的例子（或增加字體大小），這將是顯而易見的。看看我的答案，你可能會明白... –

你可以試試這個：

ul li { 
 
    list-style-type: none; 
 
    display: inline-block; 
 
    width: 30px; 
 
    height: 30px; 
 
    background-color: #fff; 
 
    text-align: center; 
 
    border-radius: 100%; 
 
    margin: 0 11px; 
 
} 
 
i { 
 
    padding-top: 20%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> 
 
<ul> 
 
    <li><i class="fa fa-download"></i> 
 
    </li> 
 
    <li><i class="fa fa-upload"></i> 
 
    </li> 
 
    <li><i class="fa fa-trash"></i> 
 
    </li> 
 
</ul>

來源

2016-09-28 12:11:37

只需將'fa-4x'類添加到圖標上，您就會發現您不能解決問題。 –

你嘗試在該圖標的類中使用

vertical-align: middle;

？

來源

2016-09-28 14:04:54 bermudaa

字體awesom圖標對齊

回答

相關問題