CSS로 내비게이션 바 링크 중앙 정렬하기
웹 페이지에서 세로형 내비게이션 바(탐색 모음)를 만들 때 메뉴 링크가 왼쪽에 치우쳐 보이는 경우가 많습니다. 이럴 때 링크 텍스트를 가운데 정렬하고 싶다면 아주 간단한 방법이 있습니다.
핵심은 <li> 요소에 'text-align: center' 속성을 추가하는 것입니다. 리스트 항목 자체에 텍스트 정렬 속성을 지정하면 그 안에 포함된 링크(<a>)도 함께 중앙으로 정렬됩니다.
예제 코드
아래 예제는 세로형 내비게이션 바를 만들고, 각 메뉴 항목의 링크를 중앙에 배치한 전체 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
}
li a {
display: block;
background-color: #F0E7E7;
}
.active {
background-color: #4CAF50;
color: white;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
</style>
</head>
<body>
<ul>
<li><a href = "#home">Home</a></li>
<li><a href = "#company" class = "active">Company</a></li>
<li><a href = "#product">Product</a></li>
<li><a href = "#services">Services</a></li>
<li><a href = "#contact">Contact</a></li>
</ul>
</body>
</html>코드 설명
1. ul 스타일 초기화
'list-style-type: none'으로 기본 불릿(점)을 제거하고, 'margin'과 'padding'을 0으로 설정해 브라우저 기본 여백을 없앴습니다. 'width: 200px'로 내비게이션 바의 너비를 고정했습니다.
2. 링크를 블록 요소로 변환
'li a { display: block; }' 덕분에 링크가 항목 영역 전체를 채워 클릭 범위가 넓어지고, 배경색도 항목 전체에 적용됩니다.
3. 링크 중앙 정렬
'li { text-align: center; }'가 이 글의 핵심 부분입니다. 이 한 줄 덕분에 Home, Company 등 모든 메뉴 텍스트가 항목의 가운데에 위치하게 됩니다.
4. 구분선과 활성 상태 표시
'border-bottom'으로 각 메뉴 사이에 경계선을 추가했고, '.active' 클래스를 사용해 현재 머무르는 페이지(Company)를 초록색 배경과 흰색 글자로 강조했습니다.
마무리
이처럼 'text-align: center' 하나만으로도 내비게이션 바의 링크를 손쉽게 중앙 정렬할 수 있습니다. 여기에 hover 효과나 패딩을 추가하면 더욱 완성도 높은 메뉴를 만들 수 있으니, 위 코드를 응용해 직접 스타일을 바꿔보시기 바랍니다.