角度md按鈕破壞對齊

Question

當我不插入md-button時，一切都很完美。但是當我添加md-button時，span無法正常工作。數字「5」下降。我怎麼解決這個問題？

HTML：

<button md-button class="special-orders">xüsusi təkliflər <span>5</span></button> 

CSS：

.special-orders { 
    font-size: 15px; 
    color: white; 
    span { 
     font-size: 11px; 
     display:inline-block; 
     width: 15px; 
     height: 15px; 
     text-align: center; 
     color: #FF2868; 
     background-color: white; 
     border-radius: 50%; 
     vertical-align: middle; 
     padding: 0; 
    } 
    } 

Answer 1

材料造型設置按鈕線路高度36px這似乎是導致與跨度問題具有固定的高度和寬度。設置跨度上的線高也比嘗試將所有內容排成一行更容易。

.special-orders { 
     font-size: 15px; 
     color: white; 
     span { 
     line-height: 18px; 
     width: 18px; 
     display:inline-block; 
     text-align: center; 
     color: #FF2868; 
     background-color: white; 
     border-radius: 50%; 
     vertical-align: middle; 
     padding: 0; 
     } 
    }