> 웹 프론트엔드 > CSS 튜토리얼 > 컨테이너를 가운데 정렬하고 하위 요소를 반응 열에 왼쪽 정렬하는 방법은 무엇입니까?

컨테이너를 가운데 정렬하고 하위 요소를 반응 열에 왼쪽 정렬하는 방법은 무엇입니까?

Susan Sarandon
풀어 주다: 2024-11-02 14:20:30
원래의
297명이 탐색했습니다.

How to Center Align Container and Left Align Child Elements with Responsive Columns?

가운데 정렬 컨테이너 및 왼쪽 정렬 하위 요소

귀하의 질문은 중앙 정렬 및 왼쪽 정렬 하위 요소를 웹 페이지에 동적으로 표시하는 것을 목표로 합니다. 크기 조정 없이 행으로 정렬됩니다. 하위 요소는 함께 그룹화되고 간격을 두어야 합니다.

이를 달성하려면 CSS에서 미디어 쿼리를 활용할 수 있습니다. 제공된 코드는 다음 방법을 보여줍니다.

<code class="css">body {
    margin: 10px 0;
}
.outer {
    text-align: center;
}
.inner {
    font-size: 0; /* fix for inline gaps */
    display: inline-block;
    text-align: left;
}
.item {
    font-size: 16px; /* reset font size */
    display: inline-block;
    margin: 5px; /* gutter */
}
.item img {
    vertical-align: top;
}
@media (max-width: 551px) { /* ((100+5+5)x5)+1 */
    .inner {
        width: 440px; /* (100+5+5)x4 */
    }
}
@media (max-width: 441px) {
    .inner {
        width: 330px;
    }
}
@media (max-width: 331px) {
    .inner {
        width: 220px;
    }
}
@media (max-width: 221px) {
    .inner {
        width: 110px;
    }
}</code>
로그인 후 복사

이 코드에는 내부 div의 너비가 동적으로 조정되도록 다양한 화면 크기에 대한 특정 미디어 쿼리가 포함되어 있습니다. 요구 사항에 따라 여백(여백) 크기를 조정해야 할 수도 있습니다.

위 내용은 컨테이너를 가운데 정렬하고 하위 요소를 반응 열에 왼쪽 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿