📒 html

<ul id="header_navi">
         <li><a href="#"><img src="images/loginPassword.png"><span>로그인</span></a></li>
         <li><a href="#"><img src="images/loginJoin.png"><span>회원가입</span></a></li>
         <li><a href="#"><img src="images/loginMember.png"><span>My Page</span></a></li>
         <li><a href="#"><img src="images/loginCustomer.png"><span>고객센터</span></a></li>
       </ul>
       

ul, li을 사용하여 오른쪽 정렬 만들기

✏️ 문제점

1. div로 했을 때 이미지 아래 글자 삽입 시 계단 형식으로 떨어지는 모양이 생김
   (div)는 block 속성, (span)은 inline 속성
2. div로 사용하면 이미지와 글자의 위치를 맞추기가 어렵다.

📒 css

#header_navi > li {
        display: inline-block;
        position: relative;
        top: 10px;
        left: 260px;
      }
      #header_navi > li > a {
        display:block; position:relative; padding-bottom:19px;
        margin: 50px;
      }
      #header_navi > li > a > img {
        width:50px; height:50px;
      }
      #header_navi > li > a > span {
        position:absolute; bottom:0; left:50%; color:#666; line-height:1.462em; white-space:nowrap; transform:translate(-50%, 0)
      }

✏️ 해결책

1. ul, li로 변경 후 display: inline-block로 맞추어준다.
2. 글자의 상태를 block 상태로 만든다.
3. white-space: nowrap;을 사용하여 세로 정렬 글자를 가로 정렬로 바꾸어준다.
4. transform: translate(-50%, 0)을 이용하여 이미지 아래 글자가 가운데 정렬이 될 수 있도록 도와준다.