CSS Li를 수평으로 가운데 정렬하는 방법-CSS 튜토리얼-php.cn

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

藏色散人

풀어 주다： 2023-01-03 09:23:39

원래의

8077명이 탐색했습니다.

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

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

이 기사의 운영 환경: 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를 수평으로 가운데 정렬하는 방법