왼쪽 상단에 위치한 글자를 노란색 박스 정중앙으로 옮기고 싶다면 text-align과 line-height 속성을 사용합니다. text-align 속성은 x축을 기준으로 글자를 수평으로 정렬시킬 때 사용합니다. 버튼 안에 있는 텍스트를 x축 중앙에 배치하고 싶다면 center 속성값을 입력합니다.

line-height 속성은 텍스트 위아래 줄 간격을 지정할 때 사용합니다. 버튼 안에 있는 텍스트를 y축 중앙에 배치하고 싶다면 속성값을 버튼의 높이와 같은 값인 50px로 입력합니다.

예제 소스 Exercise/11장/1_navigation/style.css

li {
    width: 100px;
    height: 50px;
    background-color: yellow;
    border: solid 5px red;
    text-align: center;
    line-height: 50px; /* height 속성값과 동일한 속성값을 입력합니다. */
}

그림 11-4 버튼 안에 있는 글자가 정중앙으로 정렬됨