0

.popup-num-layout


    font-size: 12px;
    padding: 0;
    line-height: 25px;
    background-color: #177ce9;
    color: #fff;
    border-radius: 50%;
    font-weight: 200;
    width: 30px;
    height: 30px;
    text-align: center;
    border: 2px #fff solid;
<div class="popup-num-layout">3</div>
<div class="popup-num-layout">16</div>

clipboard.png

clipboard.png

水平:個位數字跟十位數字很明顯往左偏了⋯⋯
垂直:很明顯不是在垂直中間
怎麼樣做出一個完美的球+數字呢?


補充

clipboard.png

clipboard.png

asys0512 2.7k
2019-01-17 提问
4 个回答
1

已采纳
line-height: 50px;
width: 50px;
border-radius: 50%;
background-color: red;
text-align: center;
color: #fff;

这样就可以了

1
.popup-num-layout{
    display: flex;
    justify-content: center;
    align-items: center;
}
1

flex布局了解一下?
https://jsfiddle.net/EverJust...

0

line-height应该是30px;
左右不局中是别的原因
https://jsbin.com/juwotozanu/...

撰写答案

推广链接