다른 Flex 항목이 포함된 컨테이너의 Flex 항목을 중앙에 어떻게 배치할 수 있나요?

추가 Flex 항목을 사용하여 컨테이너 내에서 Flex 항목을 중앙에 정렬

Flex 정렬 속성은 컨테이너 내에서 비어 있는 공간을 할당합니다. 따라서 인접한 항목의 결합된 너비가 컨테이너의 너비와 동일하지 않으면 다른 항목으로 둘러싸인 플렉스 항목을 자동으로 중앙에 배치하는 것은 불가능합니다.

제공된 두 번째 예를 고려하세요. 스팬 요소의 전체 너비는 h2 요소의 양쪽에서 동일합니다. 결과적으로, h2는 컨테이너 중앙에 완벽하게 위치합니다.

<code class="css">.container {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid red;
  margin: 5px;
  padding: 5px;
}

p {
  text-align: center;
}

p > span {
  background-color: aqua;
  padding: 5px;
}</code>

<code class="html"><div class="container">
  <span>I'm span 1</span>
  <span>I'm span 2</span>
  <span>I'm span 3</span>
  <h2>I'm an h2</h2>
  <span>I'm span 4</span>
  <span>I'm span 5</span>
  <span>I'm span 6</span>
</div>
<p><span>TRUE CENTER</span></p></code>

위 내용은 다른 Flex 항목이 포함된 컨테이너의 Flex 항목을 중앙에 어떻게 배치할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!