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

<div>

해결책

집

웹 프론트엔드

CSS 튜토리얼

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

Susan Sarandon

Nov 30, 2024 am 11:45 AM

How to Center a Child Element Within a Parent `` Using CSS?

CSS를 사용하여 요소를 왼쪽: 50%; 중앙에 배치하는 경우 정렬은 전체 창을 기준으로 합니다. 그러나 상위

내에서 요소를 중앙에 배치할 때 포함된 요소를 기준으로 정렬되기를 원합니다.

해결책

이를 달성하려면 텍스트 조합을 사용할 수 있습니다. -align: 중앙; 여백: 자동; CSS 속성.

1단계: 상위

가운데

텍스트 정렬 설정: 가운데; 상위

요소. 그러면 모든 하위 요소가 그 안에 중앙에 배치됩니다.

2단계: 여백을 사용하여 특정 하위 요소를 중앙에 배치합니다.

상위

정렬되면 특정 하위 요소를 중앙에 배치해야 합니다. 여백 적용: 자동; 자식 요소에. 이렇게 하면 하위 요소의 너비에 관계없이 상위

내의 요소가 자동으로 중앙에 배치됩니다.

명확하게 설명하려면 다음 예를 참조하세요.

#parent {
  text-align: center;
  background-color: blue;
  height: 400px;
  width: 600px;
}

.child {
  height: 100px;
  width: 200px;
  text-align: left;
}

.center {
  margin: auto;
  background-color: green;
}

로그인 후 복사

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

본 웹사이트의 성명

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

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7545

Cakephp 튜토리얼

1381

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

GraphQL 캐싱 작업 Mar 19, 2025 am 09:36 AM

최근에 GraphQL 작업을 시작했거나 장단점을 검토 한 경우 "GraphQL이 캐싱을 지원하지 않음"또는

Redwood.js 및 동물 군을 사용하여 이더 리움 앱 구축 Mar 28, 2025 am 09:18 AM

최근 Bitcoin의 가격이 20k 달러가 넘는 USD가 최근에 등반되면서 최근 30k를 끊었으므로 Ethereum을 만드는 데 깊이 다이빙을 할 가치가 있다고 생각했습니다.

Leakenty와 함께 자신의 Bragdoc을 만듭니다 Mar 18, 2025 am 11:23 AM

개발자로서 어느 단계에 있든, 우리가 완료 한 작업은 크든 작든, 개인적이고 전문적인 성장에 큰 영향을 미칩니다.

vue 3 Apr 02, 2025 pm 06:32 PM

그것은#039; VUE 팀에게 그것을 끝내는 것을 축하합니다. 나는 그것이 막대한 노력과 오랜 시간이라는 것을 알고 있습니다. 모든 새로운 문서도 있습니다.

브라우저에서 유효한 CSS 속성 값을 얻을 수 있습니까? Apr 02, 2025 pm 06:17 PM

나는 누군가이 매우 합법적 인 질문으로 글을 썼습니다. Lea는 브라우저에서 유효한 CSS 속성 자체를 얻는 방법에 대해 블로그를 작성했습니다. 이는 이와 같습니다.

CI/CD에 약간 Apr 02, 2025 pm 06:21 PM

"웹 사이트"는 "모바일 앱"보다 더 잘 맞지만 Max Lynch 의이 프레임이 마음에 듭니다.

반응 형 디자인을위한 브라우저 비교 Apr 02, 2025 pm 06:25 PM

목표가 귀하의 사이트를 동시에 다른 크기로 표시하는 이러한 데스크탑 앱이 많이 있습니다. 예를 들어, 글을 쓸 수 있습니다

끈적 끈적한 포지셔닝 및 대시 Sass가있는 쌓인 카드 Apr 03, 2025 am 10:30 AM

다른 날, 나는 Corey Ginnivan의 웹 사이트에서 스크롤 할 때 카드 모음이 서로 쌓이는 것을 발견했습니다.

See all articles

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

해결책

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제