고르지 않은 주변 요소가 있는 컨테이너에서 Flex 항목을 중앙에 배치하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

고르지 않은 주변 요소가 있는 컨테이너에서 Flex 항목을 중앙에 배치하는 방법은 무엇입니까?

Barbara Streisand

풀어 주다： 2024-11-01 02:45:28

원래의

297명이 탐색했습니다.

How to Center a Flex Item in a Container with Uneven Surrounding Elements?

다른 Flex 항목 가운데 컨테이너의 Flex 항목 중앙에 배치

과제:

다양한 수의 요소.

접근 방식:

플렉스 정렬 속성은 컨테이너 내의 여유 공간을 분산하므로, 고르지 않은 형제 사이에 단일 항목을 중앙에 배치하는 것은 추가 조치 없이는 어렵습니다.

고려사항:

전체 길이가 주변 요소가 항목 양쪽에서 동일하면 중심 정렬이 가능해집니다.

해결책:

컨테이너에 남아 있는 내용과 동일한 전체 길이를 보장합니다.

<code class="html"><div class="container">
  <div>
    <span>I'm span 1</span>
    <span>I'm span 2</span>
  </div>
  <div>
    <h2>I'm an h2</h2>
  </div>
  <div>
    <span>I'm span 3</span>
  </div>
</div></code>

로그인 후 복사

<code class="css">.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container div {
  flex: 1 1 auto;  // Equalize flex sizing
  text-align: center;
}

h2 {
  flex: 0 0 auto;  // Prevent h2 from affecting flex sizing
  margin: auto;   // Center within its container
}</code>

로그인 후 복사

설명:

내부

컨테이너를 "1 1 auto"로 설정하면 Flex 컨테이너 내에서 동일한 공간을 차지합니다.