我有字體真棒圖標就像這樣：如何調整字體超讚圖標的垂直位置？
<div>
<span >Total</span>
<i class="cat-color fa fa-circle" style="color: darkorange" aria-hidden="true"></i>
<span>11</span>
</div>
這裏是一個的jsfiddle http://jsfiddle.net/JfGVE/1519/ 基本上我想有向上或向下移動圖標的選項。我嘗試添加填充和邊距，但沒有任何內容。
如何更改圖標的垂直位置？
你可以也可以這樣使用行高和垂直對齊方式：
.cat-color {
line-height: 9px;
vertical-align: top;
}
然後將行高改爲更高或更低的值，將ic上或下。
我已經讓它向上移動。
簡單明瞭，謝謝 –
請檢查它是否適用於您關心的瀏覽器。我只在Chrome和IE Edge中檢查過。 –
div {
display: inline-flex;
align-items: center;
}
div {
display: inline-flex;
align-items: center;
}
i {
margin-bottom: 20px;
transition: .2s
}
div:hover > i {
margin-bottom: -20px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="all-incidents-count">
<span>Hover</span>
<i class="cat-color fa fa-circle" style="color: darkorange" aria-hidden="true"></i>
<span>me!</span>
</div>Kode_12使用flex嗎？ – Lowkase
使用display:inline-block與vertical-align
多看這裏：CSS vertical-align Property
.fa {
display:inline-block;
vertical-align:bottom;
}
span {
display:inline-block;
height:150px;
}
div {
background:red;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
<span >Total</span>
<i class="cat-color fa fa-circle" style="color: darkorange" aria-hidden="true"></i>
<span>11</span>
</div>2.使用position:relative;和top:
多看這裏CSS position
.fa {
position:relative;
top:80%;
}
div {
background:red;
height:150px;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
<span >Total</span>
<i class="cat-color fa fa-circle" style="color: darkorange" aria-hidden="true"></i>
<span>11</span>
</div>這些都只是2解決方案。有更多...但你應該能夠實現你想要的使用這些2.一個讓我知道，如果它
嘗試給外部divs一個高度，並且你的演示都無法正常工作我想..你能檢查一下嗎？ – kukkuz
用'height：150px'更改了我的答案。對於第一個示例，您需要將高度設置爲'span'元素和'display：inline-block'。在第二個例子中，它可以在'div' –
上使用'top'和'height：150px'工作，但是，特別是對於第二種解決方案，您可以將「top：80％」更改爲任何您想要的內容，並且它就像魅力一樣。不知道你爲什麼說它不起作用 –
相對定位：
ul {
padding-left: 20px;
list-style: none;
}
li {
margin-bottom: 10px;
}
.cat-color.fa::before {
position: relative;
top: 20px;
}<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="all-incidents-count">
<span>Total</span>
<i class="cat-color fa fa-circle" style="color: darkorange" aria-hidden="true"></i>
<span>11</span>速戰速決是設置height一樣line-height。
摘錄如下：
.wrapper{
height: 50px;
border: 1px solid red;
line-height: 50px;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<div class="wrapper">
<span>Total</span>
<i class="cat-color fa fa-circle" style="color: darkorange" aria-hidden="true"></i>
<span>11</span>
</div>
你嘗試過什麼？你可以發佈你的CSS？一般來說，font-awesome集顯示「i」元素以內聯。我通常將其設置爲內嵌塊或塊，具體取決於我想要定位的內容。 – Lowkase