집 >웹 프론트엔드 >CSS 튜토리얼 >CSS Li를 수평으로 가운데 정렬하는 방법

CSS Li를 수평으로 가운데 정렬하는 방법

藏色散人원래의: 2021-02-18 09:57:598163검색

Css li 가로 중심 정렬 방법: 먼저 HTML 샘플 파일을 만든 다음 li 태그를 정의하고 마지막으로 "overflow: hide; margin: 100px auto;"와 같은 속성을 통해 가로 중심 정렬을 수행합니다.

이 기사의 운영 환경: windows7 시스템, HTML5&&CSS3 버전, DELL G3 컴퓨터.

다열 li 요소의 수평 센터링 효과를 구현하는 Css 방법

다열 li 요소의 수평 센터링 효과를 구현하는 코드 예제를 공유하세요.

여기서 수평 센터링은 실제로 li 요소의 균일한 분포 효과입니다.

코드 예제는 다음과 같습니다.

<!doctype html><html>
<head>
<meta charset="utf-8">
<style>
* {
  margin: 0;
  padding: 0;
}
.main {
  width: 1180px;
  height: auto;
  margin: 100px auto;
  border: 1px solid #f00;
  overflow: hidden;
}
.main ul {
  width: 1120px;
  list-style: none;
  margin: 0 auto;
}
.main ul li {
  width: 100px;
  height: 100px;
  margin-right: 20px;
  margin: 20px;
  background: #f00;
  float: left;
}
</style>
</head>
<body>
<div class="main">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
</body>
</html>

Rendering:

CSS Li를 수평으로 가운데 정렬하는 방법

위 코드는 우리의 요구 사항을 충족합니다. 다음은 구현 원리에 대한 간략한 소개입니다.

ul 요소의 너비를 li 요소의 너비에 여백 값을 더한 값과 동일하게 설정합니다. 이 값이 w로 표시된다고 가정합니다.

ul의 상위 요소 너비는 w-margin-right(20px)이고 이 상위 요소에는 Overflow:hidden 속성이 있으므로 초과 여백은 숨겨집니다.

CSS Li를 수평으로 가운데 정렬하는 방법

관련 기사