在圓形按鈕中完美居中文字？

我正在嘗試創建一個在懸停時旋轉的圓形按鈕。正如你從動畫中看到的那樣，文字看起來並沒有完全居中，這導致了+的奇怪旋轉。在圓形按鈕中完美居中文字？

這裏是我的代碼：

button { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 15px; 
 
    border: none; 
 
    border-radius: 50%; 
 
    background: black; 
 
    color: white; 
 
    width: 50px; 
 
    height: 50px; 
 
    transition: transform 2s; 
 
} 
 

 
button:hover { 
 
    transform: rotate(360deg); 
 
}

<button>+</button>

來源

2017-10-13 inhwrbp

嘗試使用[SVG]（https://developer.mozilla.org/en-US/docs/Web/SVG），而不是 '+' 字符。有各種各樣的間距，你有什麼關聯到一個字體。例如，對於使用設置樣式表的用戶來說，它可能會有所不同。 – Paul

謝謝，會使用類似FontAwesome圖標或材質圖標的東西嗎？不完全確定我將如何製作SVG – inhwrbp

這似乎有點硬

例子正好居中對齊文本。但是，將一個形狀居中對齊更容易。所以作爲替代選項，我在僞元素之前和之前創建了「+」，並且旋轉得非常好。你可以檢查下面的代碼。

button { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 15px; 
 
    border: none; 
 
    border-radius: 50%; 
 
    background: black; 
 
    color: white; 
 
    width: 50px; 
 
    height: 50px; 
 
    transition: transform 2s; 
 
    position: relative; 
 
} 
 
button:after, 
 
button:before{ 
 
    background: red; 
 
    position: absolute; 
 
    content: ""; 
 
    display: block; 
 
    z-index: 1; 
 
} 
 
button:after{ 
 
    top: 20px; 
 
    bottom: 20px; 
 
    left: 24px; 
 
    right: 24px; 
 
} 
 
button:before{ 
 
    top: 24px; 
 
    bottom: 24px; 
 
    left: 20px; 
 
    right: 20px; 
 
} 
 

 
button:hover { 
 
    transform: rotate(360deg); 
 
}

<button></button>

來源

2017-10-13 09:23:27

這是正確的答案，所有其他人都依賴於水平和垂直居中的一塊文本。 – Paul

@保羅是...... – Vishnu

新增text-align: center，line-height: 50px，box-sizing: border-box並增加加的大小，使其運動容易看到。

button { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 34px; 
 
    border: none; 
 
    border-radius: 50%; 
 
    background: black; 
 
    color: white; 
 
    width: 50px; 
 
    height: 50px; 
 
    transition: transform 2s; 
 
    text-align: center; 
 
    line-height: 50px; 
 
} 
 

 
button:hover { 
 
    transform: rotate(360deg); 
 
}

<button>+</button>

來源

2017-10-13 08:39:24 Sergey

使用display: flex以及水平和垂直對齊按鈕上的文字爲

display:flex; 
    justify-content:center; 
    align-items:center;

button { 
 
    font-size: 15px; 
 
    border: none; 
 
    border-radius: 50%; 
 
    background: black; 
 
    color: white; 
 
    width: 50px; 
 
    height: 50px; 
 
    transition: transform 2s; 
 
    display:flex; 
 
    justify-content:center; 
 
    align-items:center; 
 
    box-sizing:border-box; 
 
} 
 

 
button:hover { 
 
    transform: rotate(360deg); 
 
}

<button>+</button>

來源

2017-10-13 08:41:18

選中此

button { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 15px; 
 
    border: none; 
 
    border-radius: 50%; 
 
    background: black; 
 
    color: white; 
 
    width: 50px; 
 
    height: 50px; 
 
    transition: transform 2s; 
 
    font-family: arial; 
 
    line-height: 50px; 
 
} 
 

 
button:hover { 
 
    transform: rotate(360deg); 
 
} 
 
button:before{ 
 
content:""; 
 
}

<button>+</button>

來源

2017-10-13 08:41:22

只接受代碼的答案是不鼓勵的，因爲他們沒有解釋他們如何解決問題中的問題。考慮更新你的答案，以解釋它做了什麼，以及它如何解決問題 - 這不僅有助於OP，而且還有其他類似問題。請回顧[我如何寫一個好的答案]（https://stackoverflow.com/help/how-to-answer） – FluffyKitten

您的文字看臺上的基線。您可以通過平均值爲0.2em的填充將其推上或使用內嵌塊僞和垂直對齊。下面

button { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 15px; 
 
    border: none; 
 
    border-radius: 50%; 
 
    background: black; 
 
    color: white; 
 
    width: 50px; 
 
    height: 50px; 
 
    transition: transform 2s; 
 
} 
 

 
button:hover { 
 
    transform: rotate(360deg); 
 
} 
 
button.ib:before { 
 
content:''; 
 
display:inline-block; 
 
height:50px; 
 
vertical-align:middle; 
 
width:0; 
 
margin:0 -0.05em; 
 
} 
 
.pad { 
 
box-sizing:border-box; 
 
padding-bottom:0.175em; 
 
} 
 
p { 
 
text-align:center; 
 
background:yellow; 
 
} 
 
p:after { 
 
content:''; 
 
display:inline-block; 
 
width:120vw; 
 
margin-left:-50vw; 
 
border-bottom:red solid 1px; 
 
}

<button class="ib">+</button> 
 
<button class="pad">+</button> 
 
<p> where is baseline ? </p>

來源

2017-10-13 08:51:52

在圓形按鈕中完美居中文字？

回答

相關問題