如何讓圈圈的數字水平垂直置中?

.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

阅读 4.1k
4 个回答
line-height: 50px;
width: 50px;
border-radius: 50%;
background-color: red;
text-align: center;
color: #fff;

这样就可以了

.popup-num-layout{
    display: flex;
    justify-content: center;
    align-items: center;
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题