Невозможно сделать текст посередине и по центру

Question

.css { 
    background: highlight none repeat scroll 0 0; 
    border-radius: 50%; 
    color: rgb(255, 255, 255); 
    height: 10px; 
    padding: 3px; 
    text-align: center; 
    width: 10px; 
    font-size:10px 
} 

И height & width и font-size не может больше или меньше, чем 10px.

<div class="css">4</div> 

У вас есть решение для этого?

Answer 1

Самый простой способ сделать это - установить только line-height, равный height элемента.

.css { 
 
    background: highlight; 
 
    border-radius: 50%; 
 
    color: rgb(255, 255, 255); 
 
    height: 10px; 
 
    padding: 3px; 
 
    text-align: center; 
 
    width: 10px; 
 
    font-size: 10px; 
 
    line-height: 10px; 
 
}

<div class="css">4</div>

Другой способ заключается в использовании Flexbox и установить align-items: center и justify-content: center.

.css { 
 
    background: highlight; 
 
    border-radius: 50%; 
 
    color: rgb(255, 255, 255); 
 
    height: 10px; 
 
    padding: 3px; 
 
    width: 10px; 
 
    font-size: 10px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<div class="css">4</div>