[CSS] Button 내부의 텍스트 정렬

초기 코드는 다음과 같았다.

button {
    width: 50px;
    height: 30px;
    float:right;
    text-align: center;
    font-size: 1.5em;
    background-color: white;
    outline: 0;
    border-radius: 50px;
    border: none;
    cursor: pointer;
}

text-align에서 center를 설정했는데도 가운데에 있지 않았다.

---

Display, align-items, justify-content를 사용하여 해결했다.

button {
    width: 50px;
    height: 30px;

    float:right;
    display:flex;
    text-align: center;
    align-items:center;
    justify-content:center;
    font-size: 1.5em;
    
    background-color: white;
    outline: 0;
    border-radius: 50px;
    border: none;
    cursor: pointer;
}