CSS의 요소를 정렬합니다

CSS Alignment Demystified : 포괄적 인 가이드 (1 부) CSS에서 요소를 정렬하는 것은 놀랍게도 어려울 수 있습니다. 이 문제를 해결하고 요소를 효과적으로 배치하는 방법을 배우겠습니다.

스테이지 설정

---

우리는 일부 샘플 html로 시작합니다 :
1. 및 해당 CSS :

센터링 요소

<code class="language-html"><div class="outer-div">
  <div class="inner-div"></div>
  <p>Initial rendering without CSS:</p>
  <img alt="Initial rendering" src="/uploads/20250128/173802269967981f2bdc9c3.jpg" loading="lazy">
  <p>Adding CSS for improved styling:</p>
  <img alt="Improved styling" src="/uploads/20250128/173802270067981f2c02601.jpg" loading="lazy">
  <p>This is a basic example.</p>
</div></code>

요소를 중심으로하자. 에 를 추가합니다

<code class="language-css">.outer-div {
  /* Alignment styles will be added here */
}

.inner-div {
  width: 150px;
  height: 150px;
  background-color: blue;
  /* More alignment styles here */
}

h1, p {
  font-family: sans-serif;
}</code>

에 동일하게 적용하면 초기에 예상치 못한 결과가 생성됩니다. 및

속성을 ​​제거하면 결과가 향상되지만 이상적이지 않습니다.

2. HTML을 약간 조정하겠습니다. 다음 업데이트 된 HTML 및 CSS는 더 나은 그림을 제공합니다.

로 변경하는 display: flex;는 또 다른 유용한 정렬 기술을 보여줍니다. justify-content: center; .outer-div 이것은 기본 사항을 다룹니다. 파트 2를 계속 지켜봐주십시오! 아래의 CSS 정렬 팁과 트릭을 공유하십시오!

위 내용은 CSS의 요소를 정렬합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!