CSS에서 Div의 가로 목록을 중앙에 배치하는 방법

콘텐츠

• 지침

웹 페이지를 만들 때 CSS를 사용하여 클릭 가능한 메뉴와 같은 가로 목록을 가운데에 배치하는 것이 유용 할 수 있습니다. 스타일 시트 언어 인 CSS를 HTML 옆에 사용하여 페이지의 모양을 제어 할 수 있습니다. CSS 스타일은 종종 다른 웹 브라우저에서 예기치 않게 표시되므로 게시하기 전에 페이지를 철저히 테스트하는 것이 중요합니다. 정렬되지 않은 목록 (ul)은 블록 수준 요소이므로 width 속성을 사용하여 중앙 집중식 효과를 만들 수 있습니다.

지침

CSS와 HTML을 사용하여 웹 페이지의 모양을 제어 할 수 있습니다. (Comstock / Stockbyte / 게티 이미지)

1. Windows 메모장과 같은 텍스트 편집기에서 HTML 파일을 엽니 다.

2. 다음 코드를 추가하여 HTML 파일의 ""섹션에 필요한 CSS 스타일을 가로 목록에 추가하십시오.

   type = "text / css"> .myclass {text-align : center; } .myclass ul {width : 275px; margin : 0px auto} .myclass li {display : block; float : 왼쪽; 높이 : 50px; 선 높이 : 50px; 여백 : 5px; 너비 : 125px; 테두리 : 단색 1px 검정색; }

   목록의 너비 (ul)는 가로 항목의 여백과 여백의 합을 나타냅니다 (li).

3. 다음 코드를 추가하여 HTML 파일의 ">"섹션에 가로 목록을 만듭니다.

   • 첫 번째 항목
   • div의 두 번째 항목

   "ul"태그는 정렬되지 않은 목록을 지정합니다. "li"태그는 목록의 항목에 해당합니다. 목록 항목은 위에 정의 된 CSS 스타일과 일치하는 CSS 스타일을 사용합니다.

4. HTML 파일을 저장하고 웹 서버에로드하여 수평 중심의 목록을 봅니다.