왼쪽 상단에 위치한 글자를 노란색 박스 정중앙으로 옮기고 싶다면 text-alignline-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 버튼 안에 있는 글자가 정중앙으로 정렬됨

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.