中心圖形內容

我使用Google Chrome Inspector，如果您選擇glyphicon的僞僞碼，您將看到右側有空白區域。我如何可以將glyphicon居中？中心圖形內容

我試圖設置文本對齊，但它不起作用。

<span class="glyphicon glyphicon-plus"></span> 
<style>.glyphicon { font-size: 120px; }</style>

jsFiddle

更新的鏈接jsFiddle 2

Glyphicon

來源

2015-07-01 Almis

更新的鏈接http://jsfiddle.net/sps01dsd/1/ – Almis

這可能是glyphicons字體文件內的字距問題，如果你試圖在一個單一的AZ字符內聯元素，你會認爲他們是正確的中心對齊。 – Luizgrs

@Luizgrs你是對的，我相信他們中的大多數是正確的，但其他一些沒有，如果你嘗試glyphicon-減去它更糟。我認爲唯一的辦法是手動調整。將等待更好的解決方案。 – Almis

我給letter spacing僞元素的它做到了訣竅。我試着改變了font-size，我發現空白區沒有出現。

.glyphicon:before{ 
    letter-spacing: -0.085em; 
}

工作小提琴：http://jsfiddle.net/MasoomS/1z79r22y/

來源

2015-08-22 11:05:48 Masoom

這是迄今爲止最好的答案..我會接受它，但會等待另一個幾天給予獎勵 – Almis

只是類my-style-icon添加到圖標，並添加到您的CSS：

.my-style-icon { 
    font-size: 120px; 
    display: block; 
    text-align:center; 
}

來源

2015-07-01 18:18:10 Wazaaaap

跨度爲中心，但之前僞不是（我要指出，在這個問題） – Almis

請輸入完整的代碼，所有我在的jsfiddle看到的是圖標html和一些無用的CSS。 – Wazaaaap

我沒有做多少，我只是想在一個盒子裏，但因爲之前的僞它不看，它是在中間的居中glyphicon。我可以使用填充或邊距來解決這個問題，但我認爲可能有更好的解決方案。檢查更新的鏈接 – Almis

vertical-align: middle; margin: 0 auto;應該爲你做的伎倆。

來源

2015-07-01 19:46:06 fauverism

不工作，你能更新我的jsfiddle嗎？也許我做錯了什麼。 – Almis

Almis您好。您的演示代碼只使用只是的span拿着它沒有寬度內居中glyphicon。

只要你做了這樣的事情，它會居中。

<div class="text-center"> 
<span class="glyphicon glyphicon-plus"></span> 
</div> 
<br> 
<span class="glyphicon glyphicon-plus col-xs-12 text-center"></span>

這裏是一個Fiddle。

enter image description here

來源

2015-07-01 22:19:23 AngularJR

嗨，你的例子與我的完全一樣，如果你拿一把尺子，你會發現y軸是完全一樣的。檢查更新的jsfiddle，看看我的意思 – Almis

嗨，對不起，我第一次沒有清楚。再看看你新的小提琴，我可以看到你現在的意思。看看這個[** FIDDLE **]（http://jsfiddle.net/AngularJR/sps01dsd/3/）。加號圖標和減號圖標甚至有所不同。**減號**看起來有左邊的空間，**加**圖標的右邊有空格，正如你指出的那樣。 – AngularJR

是啊我知道，如果我們什麼都做不了，那麼這個圖形的作者應該修復它 – Almis

你好Almis。

.glyphicon { 
     font-size: 120px; 
     display: block; 
     text-align: center; 
    }

只需用上面的css代碼替換.glyphicon類。

享受..

來源

2015-07-08 10:52:47

沒有工作，請更新jsfiddle，如果你認爲它有效 – Almis

這裏是更新的小提琴。 https://jsfiddle.net/sps01dsd/4/ –

它仍然不在中心http://jsfiddle.net/sps01dsd/5/ – Almis

你可以通過筆者加入一些白色的空間，只看到它的明確一個問題，爲什麼解決這個問題是通過手動設置寬度。

來源

2015-08-18 12:53:16 Ivo

您可以通過與letter-spacing屬性打擺脫對字形的右空閒空間：

.glyphicon { 
    font-size: 120px; 
    letter-spacing: -9px; 
}

來源

2015-08-18 20:30:54 MarioG

我相信這裏的根本問題是與SVGs該圖標字體是從建。我之前從SVG中構建過圖標字體，並看到了完全相同的行爲。如果符號未在其SVG viewbox中居中，您會看到一個像您觀察到的偏離中心的字形。

開發基於代碼的解決方案會變得非常麻煩，因爲您必須單獨說明每個不居中的字形，然後您的偏移量必須與圖標大小相關，以便偏移量與圖標的font-size一起縮放。這當然是可以做到的，但這似乎是一件令人頭疼的事情。

我會建議下列之一：

接受它是什麼glyphicon集（免費圖標字體）和生活，其缺陷
查找不具有另一個圖標字體同樣的問題 - 願意支付牌照
創建自己的圖標字體，這樣可以確保所有字形居中

來源

2015-08-18 22:27:50 dmbaughman

我通常使用的最大寬度（和寬度，如果我想在一個列表中的所有圖標具有相同的大小）來處理這些問題。

根據你的jsfiddle：

max-width:222px;

見here。

來源

2015-08-25 07:06:54

的原因，這不能被固定在一個比其他黑客任何其他方式是因爲glyphicon本身是不是自己的容器內的中心，當它被設計在它的矩陣它並沒有完全居中的意思。

你將不得不「砍」它上面（字母間距，切緣陰性，等等），但它的分辨率依賴聲明shivs。

但是垂直居中它可以去除填充，並用線高度爲你的容器的高度

來源

2015-08-25 11:47:43 scooterlord

使用字體真棒，這是「+」是完全集中，沒有字距問題。在父級上使用display：flex，結合margin：auto在子級上（即圖標）。它導致完美的對齊。這裏是的jsfiddle（http://jsfiddle.net/Rpad/sps01dsd/13/）

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 

HTML: 
<div class="container"> 
    <div class="row"> 
     <div id="add" class="col-xs-6 col-sm-6 col-md-3 col-lg-3"> 
      <i class="fa fa-plus"></i> 
     </div> 
    </div> 
</div> 
CSS: 
.fa-plus { 
    margin: auto; 
    font-size: 10em; 
} 
#add { 
    border: 5px dashed black; 
    border-radius: 25px; 
    display: flex; 
}

來源

2015-08-25 12:23:40

中心圖形內容

回答

相關問題