Xの上に正確に位置するホバーオーバーサークル

Question

ホバーオーバー時に "X"の上に完全に丸い円を完全に配置しようとしています。その仕事をするには？

.select2-selection__clear { 
 
\t font-size:20px; 
 
\t padding-right:10px; 
 
} 
 

 
.select2-selection__clear:hover { 
 
\t background-color:#000; 
 
\t color:#FFF; 
 
\t width:20px; 
 
\t height:20px; 
 
\t -moz-border-radius: 20px; 
 
\t -webkit-border-radius: 20px; 
 
\t border-radius: 20px; 
 
}

<span class="select2-selection__clear">×</span>

Answer 1

この方法：それはより普遍的であるため、

.select2-selection__clear { 
 
    display: inline-block; 
 
    font-size: 20px; 
 
    width: 20px; 
 
    height: 20px; 
 
    text-align: center; 
 
    line-height: 20px; 
 
    border-radius: 20px; 
 
} 
 

 
.select2-selection__clear:hover { 
 
    background-color: #000; 
 
    color: #fff; 
 
}

<span class="select2-selection__clear">×</span>

これは、パディングを設定するよりも優れています。内部のテキストは変わるかもしれませんが、レイアウトは壊れません（サークルは実際に円になります）。

Answer 2

は、左右に等しいパディングを与えてみてください。

.select2-selection__clear { 
    font-size:20px; 
    padding-right:5px; 
    padding-left:5px; 
}