與居中的文本（垂直和水平方向）和有效區域只有圓，不是正方形形狀

enter image description here 與居中的文本（垂直和水平方向）和有效區域只有圓，不是正方形形狀

您好回合鏈路，請參閱上面的圖片。

我需要一個鏈接，在圓的形狀： - 整圈應該是鏈接的活動區域 - 「背後」圓不應該是主動方的角落 - 必須允許多個循環中的文字線

注意：我可以很容易地用table-cell做到這一點，但是我需要活動區域只是圓形。我不希望用戶能夠將鼠標懸停在圓圈後方的角落，然後點擊鏈接。

感謝

來源

2015-05-14 user1525612

小提琴更多信息：http://jsfiddle.net/4178z93u/ - 你可以看到，當將鼠標懸停在圓圈的「角落」上，它也處於活動狀態。 – user1525612

你在測試什麼瀏覽器？較新的瀏覽器不會將可點擊區域視爲正方形。 – Andrew

在現代瀏覽器中測試 - firefox – user1525612

你可以使用border-radius有一個相當大的半徑。 Check this fiddle：

a { 
    display: inline-block; 
    border-radius: 80px; 
    height: 80px; 
    width: 80px; 
    background: red; 
    padding-top: 25px; 
    text-align: center; 
    box-sizing: border-box; 
}

至於如何中心在按鈕上的文字：只用一行文字，你可以簡單地設置按鈕的line-height等於其高度。但是這顯然不適用於多行文本。 Check out this fiddle從this SO answer，它可能會幫助你。

來源

2015-05-14 08:19:32

請參閱下面的示例。注意line-height: 160px; - 這個技巧垂直對齊文本。

.circle-link{ 
 
    display: inline-flex; 
 
    width: 160px; 
 
    height: 160px; 
 
    background-color: green; 
 
    color: white; 
 
    border: solid 1px darkgreen; 
 
    border-radius: 80px; 
 
    font-size: 20px; 
 
    text-decoration: none; 
 
    text-align: center; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<a href='#' class='circle-link'>Multiline<br />cyrcle link</a>

UPDATE：

如果你需要多行（或甚至圖像的文字）居中的文字，最可靠的方法是使用靈活的模式。取而代之的'display: block'或'inline-block'設置display: flex;或display: inline-flex;然後和justify-content: center;

有關垂直居中方法在這裏看到的文章Vertical centering of elements in HTML

來源

2015-05-14 08:29:08

我需要這個爲多行文本工作，我認爲這隻會在只有一行文本時才起作用 – user1525612

@ user1525612你是對的。請參閱我的答案更新 –

與居中的文本（垂直和水平方向）和有效區域只有圓，不是正方形形狀

回答

相關問題