圓圈中的中心鏈接文本

我有一個用css創建的cicle，它完全位於它的容器中。圈子中的文字是一個鏈接。此鏈接可以在圓圈內垂直居中居中嗎？我正在Firefox和Chrome上測試瀏覽器設置爲320px寬。我也在iOS Safari Mobile上進行測試。圓圈中的中心鏈接文本

這裏是一個小提琴我做證明我在這個此刻其中：

http://jsfiddle.net/rFZBA/

這裏是HTML：

<div class="container"> 
    <div class="circle"> 
     <a href="#">+</a>  
    </div> 
</div>

這裏是CSS：

.container { 
    position:relative; 
    width:300px; 
    height:100px; 
    background-color:#999; 
}  

.circle { 
    position:absolute; 
    left:100px; 
    top:50px; 

    height:1.25em;/** 20px/16px = 1.25em **/ 
    width:1.25em;/** 20px/16px = 1.25em **/ 

    padding:0.75em; /** 12px/16px = 0.75em **/ 
    border-radius:1.375em; /* Half of 44px is 22px :: 22px/16px = 1.375em **/ 
    background-color:#4d90fe; 
    color:#FFF; 
    box-shadow:1px 1px 2px 2px rgba(0, 0, 0, 0.4); 
    text-align:center; 
} 

.circle > a { 
    color:#FFF; 
    text-decoration:none; 
    font-size:2.5em; 
    font-weight:bold; 
}

來源

2013-06-04 Mdd

除非我遺漏了一些東西，否則我可以通過將頂部/左側更改爲： position：absolute; left：130px; top：28px; –

@Daniel這不是圍繞着圓圈居中，而是圓圈中的加號角色。 – bwoebi

簡單地套用.circle到<a>標籤：http://jsfiddle.net/rFZBA/16/

，然後做一些小修改，使得其尺寸是好的。

由於邊框圍繞文本並且文本是二次大小（單個+），因此它會自動居中。另外，不要忘記將高度和高度設置爲相等，以垂直居中。

來源

2013-06-04 18:07:30 bwoebi

謝謝！這非常接近。它在我的桌面firefox瀏覽器上看起來很棒，但是當我在iOS的Mobile Safari上測試它時，「+」並不是真正的中心。我想知道爲什麼有差異。 – Mdd

@Mdd無法在我的iOS 6 iPhone上重現... – bwoebi

我也有iOS 6 iPhone。紅色圓圈中的「+」號略低於中心。 – Mdd

你試過類似的東西嗎？

http://jsfiddle.net/rFZBA/10/

.circle > a { 
    color:#FFF; 
    text-decoration:none; 
    font-size:2.5em; 
    font-weight:bold; 
    display:block; 
    position:absolute; 
    left:10.5px; 
    top:0px; 
}

來源

2013-06-04 18:07:16

使用行高和文字對齊

.circle > a { 
    color:#FFF; 
    text-decoration:none; 
    font-size:2.5em; 
    font-weight:bold; 
line-height:0.625em /* wich is 1.25em (2.5/5X1.25) or use : 1.25rem; */; 
text-align:center; 
}

來源

2013-06-04 18:07:38

投票這個答案如果它可以幫助你：:)http://jsfiddle.net/BPQME/

來源

2013-06-04 18:12:26 Gimmy

我能得到它爲中心，加入display: table;到.circle和display: table-cell; vertical-align: middle;到.circle a;然而，它創造了一個長方形的物體而不是一個純粹的圓圈。這是小提琴。 http://jsfiddle.net/Nirvanachain/rFZBA/

如果我將<a>的字體大小更改爲16px，那麼您確切地想要什麼。

來源

2013-06-04 18:23:50 Daniel

圓圈中的中心鏈接文本

回答

相關問題