li 태그 안의 텍스트를 td 태그의 align="center" 속성 처럼 가운데 중앙 정렬하는 방법

<style>
li {vertical-align:middle; text-align:center}
</style>

<ul>
<li>text A</li>
<li>text B</li>
<li>text C</li>
</ul>
<ul id="test1">
<li>text A</li>
<li>text B<br>
text Sub</li>
<li>text C</li>
</ul>

상기와 같이 해서는..
가로(좌우)로 봤을 때 가운데 정렬이 되지만,
세로(위아래)로는 가운데 정렬이 되지 않습니다.
vertical-align 이 적용되지 않는다는 얘기입니다.

li 태그 안에 들어가는 텍스트가 1라인 뿐이라면,
line-height 속성값을 조정해서 위아래로 가운데 정렬이 된 것처럼 보이게 할 수 있긴 합니다만..
텍스트가 어떤 것은 1개 라인, 어떤 것은 2개 라인이면 이런 접근법으로는 해결이 되지 않습니다.

li 태그에 display:inline 속성을 세팅하면 된다는 분이 계시던데..
이렇게 되면 width 와 height 속성값이 적용되지 않는다는거 알고 계시죠..?
여기서 논의하고자 하는 것은 table 태그에 사용하는 th 나 td 처럼 작동하게 하고 싶은 겁니다. ㅎㅎ


그런데, CSS3 가 적용되는 최신 웹브라우저라면 적용되게 하는 방법이 있습니다.
IE11 v11.706.17134, Chrome v73.0.3683.86, 네이버 웨일 v1.5.71.15 등에서도 이상 없이 작동하는 방법입니다.
자, 그럼 방법을 알아 볼까요..


<style>
li {display:flex} /* 여기 까지 하면 세로로 가운데 정렬이 됩니다만, 텍스트가 왼쪽에 정렬됨. align-items:center 무의미  */
li p {width:100%; text-align:center} /* 텍스트가 가운데 정렬이 되도록 함 */
</style>

<ul>
<li><p>text A</p></li>
<li><p>text Sub</p></li>
<li><p>text C</p></li>
</ul>

<ul id="test2">
<li><p>text A</p></li>
<li><p>text B<br>
text Sub</p></li>
<li><p>text C</p></li>
</ul>
p 태그 대신에 span 태그를 사용해도 됩니다만,
li 항목의 수가 많아진다면 span 이 4글자 p 가 1글자이기 때문에 효율이 떨어집니다. ^^;