我需要構建一個圓形按鈕...而且我已經看到了很多答案...是的...它們都可以作業...但是我需要的按鈕位于一個角形材料圖示內，該圖示占據了整個空間圈子......所以當我使用這些解決方案并增加圖示的大小時，它變得不合適。
例如...使用適合我需要的
我還使用了帶有顯示表格的 div 和帶有顯示表格單元格的另一個 div 的方法，如align-text-vertically一樣，同樣的事情也發生在我身上。
uj5u.com熱心網友回復：
您需要注意的是，在這種情況下，矢量物件‹已在其上方和下方使用額外的 alpha 空間進行保存。這樣做是因為它是字體集的一部分，并且需要與其他字體字符正確對齊。
請參閱此示例，了解向量如何包含空間。只有 S 將被集中。
例子
div {
font-size: 55px;
background:#ccc;
}<div>Ss‹y</div>手動偏移
居中后使用`line-height`、`margin`、`padding`或絕對定位手動偏移字體位置。另請注意align-items控制兒童。align-content控制自己。
.btn-circle {
background-color: #444;
width: 72px;
height: 72px;
border-radius: 100%;
text-decoration: none;
display: flex;
justify-content: center;
align-content: center;
color: white;
font-weight: bold;
font-size: 55px;
line-height:60px;
}<a href="" class="btn-circle">
‹‹
</a>UNICODE 替代方案
通過將 flex 內容設定為可以像 span 標簽一樣定位的控制元件，您將獲得最佳控制。這樣您就可以直接操作物件。在這種情況下，將其設定為填充其容器。
This unicode example is not ideal as it has some alpha space. You can find others here - https://unicode-table.com/
.btn-circle {
background-color: #444;
width: 72px;
height: 72px;
border-radius: 100%;
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
}
.btn-circle span {
color: white;
font-size: 55px;
height: 100%;
}<a href="" class="btn-circle">
<span>?</span>
</a>SVG
Personally I use svg icons that are already perfectly centered vectors and easier to work with.
I don't recommend linking svg's to independant files. I would use them inline. This is just an example.
.btn-circle {
width: 72px;
height: 72px;
border-radius: 100%;
display: flex;
fill:#fff;
background: #ddd url("https://www.svgrepo.com/show/361731/chevron-double-left.svg") no-repeat center center;
background-size: 40px;
}<a href="" class="btn-circle"></a>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/433894.html
下一篇：單擊按鈕時如何設定狀態