업데이트:

아이폰 Safari에서 테스트를 하던 중 행간이 어긋나는 상황을 만나게 되었다. 정확히는 line-height 속성값이 적용되지 않은 듯한 문제다.

1

<p>1</p>

1
2
3
4
5
6
7
8
9
10

p {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid #333;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
}

See the Pen RwGjExB by sel (@selucky) on CodePen.

문제는 아래와 같다.

아이폰 Safari에서의 모습

Safari에서 행간이 맞지 않아 텍스트가 위에 붙어 있는 것처럼 보인다. 그래서 기존 스타일은 그대로 두고 가상요소로 중앙 정렬을 맞춰보려 했었다.

1
2
3
4
5
6

p:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

이 방법을 써도 똑같이 보인다.. 그래서 아래처럼 vertical-align 속성값을 수치로 잡아봤더니 해결됨.

1
2
3
4
5
6

p:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: -0.25em;
}

Hero image from geralt