如何調整字體超讚圖標的垂直位置？

我有字體真棒圖標就像這樣：如何調整字體超讚圖標的垂直位置？

<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/ 基本上我想有向上或向下移動圖標的選項。我嘗試添加填充和邊距，但沒有任何內容。

如何更改圖標的垂直位置？

來源

2016-08-16 Kode_12

你嘗試過什麼？你可以發佈你的CSS？一般來說，font-awesome集顯示「i」元素以內聯。我通常將其設置爲內嵌塊或塊，具體取決於我想要定位的內容。 – Lowkase

你可以也可以這樣使用行高和垂直對齊方式：

.cat-color { 
    line-height: 9px; 
    vertical-align: top; 
}

然後將行高改爲更高或更低的值，將ic上或下。

我已經讓它向上移動。

http://jsfiddle.net/JfGVE/1520/

來源

2016-08-16 14:46:11

簡單明瞭，謝謝 –

請檢查它是否適用於您關心的瀏覽器。我只在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>

來源

2016-08-16 14:36:55

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.一個讓我知道，如果它

來源

2016-08-16 14:45:00

嘗試給外部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>

來源

2016-08-16 14:45:26

不工作我猜，你能檢查一下嗎？ – kukkuz

它在演示中工作 –

我得到的圖標遠低於演示文稿中的圖標，這就是我爲什麼這麼說的原因 – kukkuz

速戰速決是設置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>

來源

2016-08-16 14:51:36 kukkuz

如何調整字體超讚圖標的垂直位置？

回答

相關問題