CSS를 사용하여 상위 Div 내에서 요소를 가운데에 배치하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS를 사용하여 상위 Div 내에서 요소를 가운데에 배치하는 방법은 무엇입니까?

Susan Sarandon

Nov 25, 2024 am 03:06 AM

How to Center an Element Within Its Parent Div Using CSS?

상위

내에서 요소 중심 맞추기

left: 50%;를 사용하여 HTML 요소를 가운데에 맞추면 요소가 정렬됩니다. 전체 브라우저 창과 함께. 그러나 요소를 상위

요소에는 다른 접근 방식이 필요합니다.

이를 달성하려면 text-align:center;를 할당합니다. 상위

에 연결합니다. 이렇게 하면 하위 요소를 포함하여

내의 모든 콘텐츠가 중앙에 배치됩니다.

다음으로 margin:auto;를 추가합니다. 자식 요소에. 이렇게 하면 너비나 높이에 관계없이 하위 요소가 상위

내에서 자동으로 조정됩니다.

다음은 CSS를 사용한 데모입니다.

#parent {
    text-align:center;
    background-color:blue;
    height:400px;
    width:600px;
}
.block {
    height:100px;
    width:200px;
    text-align:left;
}
.center {
    margin:auto;
    background-color:green;
}

로그인 후 복사

margin:auto에 유의하세요. ; 하위 요소를 상위

내에서 수평 및 수직 중앙에 배치합니다.

위 내용은 CSS를 사용하여 상위 Div 내에서 요소를 가운데에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

뜨거운 도구

뜨거운 주제

자바 튜토리얼

1666

Cakephp 튜토리얼

1426

라라벨 튜토리얼

1328

PHP 튜토리얼

1273

C# 튜토리얼

1254

Related knowledge

정적 양식 공급자의 비교 Apr 16, 2025 am 11:20 AM

"정적 양식 공급자"라는 용어를 동전하려고합시다. 당신은 당신의 HTML을 가져옵니다

Sass를 더 빨리 만들기위한 개념 증명 Apr 16, 2025 am 10:38 AM

새로운 프로젝트가 시작될 때, Sass 컴파일은 눈을 깜박이게합니다. 특히 BrowserSync와 짝을 이루는 경우 기분이 좋습니다.

주간 플랫폼 뉴스 : HTML로드 속성, 주요 ARIA 사양 및 iframe에서 Shadow Dom으로 이동 Apr 17, 2025 am 10:55 AM

이번 주에 플랫폼 뉴스 라운드 업 RONDUP, Chrome은로드에 대한 새로운 속성, 웹 개발자를위한 접근성 사양 및 BBC Move를 소개합니다.

HTML 대화 요소와 함께 일부 실습 Apr 16, 2025 am 11:33 AM

이것은 처음으로 HTML 요소를보고 있습니다. 나는 그것을 잠시 동안 알고 있었지만 아직 스핀을 위해 그것을 가져 갔다. 그것은 꽤 시원하고 있습니다

PaperForm Apr 16, 2025 am 11:24 AM

구매 또는 빌드는 기술 분야의 고전적인 논쟁입니다. 신용 카드 청구서에 라인 항목이 없기 때문에 물건을 구축하는 것이 저렴할 수 있지만

'Podcast 구독'링크는 어디에서 링크해야합니까? Apr 16, 2025 pm 12:04 PM

한동안 iTunes는 팟 캐스팅에서 큰 개 였으므로 "Podcast 구독"을 링크 한 경우 다음과 같습니다.

그것은 모두 헤드에있는 모든 것 : React Helmet과 함께 React 전원 사이트의 문서 헤드 관리 Apr 15, 2025 am 11:01 AM

문서 헤드는 웹 사이트에서 가장 화려한 부분이 아닐 수도 있지만 웹 사이트의 성공에 중요합니다.

직접 비자 스크립트 기반 분석을 호스팅하는 옵션 Apr 15, 2025 am 11:09 AM

사이트에서 방문자 및 사용 데이터를 추적하는 데 도움이되는 분석 플랫폼이 많이 있습니다. 아마도 널리 사용되는 Google 웹 로그 분석

See all articles

CSS를 사용하여 상위 Div 내에서 요소를 가운데에 배치하는 방법은 무엇입니까?

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제