CSS에서 가로 가운데 맞춤을 설정하는 방법: 1. "text-align: center;" 스타일을 사용하여 블록 수준 요소(상위 요소)에서 인라인 요소를 가로로 가운데에 배치합니다. 2. "margin: 0 auto;" , 블록 수준 요소(상위 요소) 내에서 고정 너비로 블록 수준 요소를 가로 중앙에 배치할 수 있습니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
방법 1: text-align 속성
을 사용하여 text-align: center; 스타일을 상위 요소에 직접 설정하여 블록 수준 요소의 인라인 요소를 수평 중앙에 배치합니다( 상위 요소) text-align: center;样式，可以将块级元素（父元素）中的行内元素进行水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#father {
width: 300px;
height: 100px;
background: palevioletred;
text-align: center;
}
</style>
<div id="father">
我是测试文本！
</div>
</html>效果图：
说明：
该种方法仅对文字、图片、按钮等行内元素有效（display属性设置为inline或inline-block的）进行水平居中
（学习视频分享：css视频教程）
方法2：使用margin属性
给需要居中的子元素设置margin: 0 auto;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#father {
width: 300px;
height: 100px;
background-color: palevioletred;
}
#son {
width: 100px;
height: 50px;
background-color: pink;
margin: 0 auto;
}
</style>
<div id="father">
<div id="son">我是块级元素</div>
</div>
</html>렌더링: 
참고:
이 방법은 텍스트, 그림, 버튼과 같은 인라인 요소에만 유효합니다(display 속성은 inline 또는 inline -block) 가로 중심 맞추기
(학습 동영상 공유: CSS 비디오 튜토리얼
)🎜🎜을 사용하여 중앙에 맞춰야 하는 하위 요소에 대해margin: 0 auto; 스타일을 설정합니다. 블록 수준 요소(상위 요소)의 고정 너비 수준 요소는 가로 중앙에 배치됩니다. 🎜rrreee🎜Rendering: 🎜🎜🎜🎜🎜🎜Description: 🎜🎜🎜이 방법은 수평 중앙에만 배치할 수 있으며 부동 요소 위치 지정에는 유효하지 않습니다. 🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜위 내용은 CSS에서 가로 가운데 맞춤을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
JavaScript 응용 프로그램에 CSS를 포함시키는 많은 방법Apr 19, 2025 am 10:08 AM프론트 엔드 개발의 땅에서 엄청나게 논란의 여지가있는 주제에 오신 것을 환영합니다! 이 글을 읽는 대다수가 당신의 박람회를 만났을 것입니다.
Netlify Analytics 소개Apr 19, 2025 am 10:07 AM당신은 사이드 프로젝트에서 잠시 일합니다. 당신은 그것을 꽤 멋지다고 생각합니다! 당신은 그것을 세상으로 풀기로 결정했습니다. 그리고… 잘 어울립니다. 아니면 잘되지 않습니다. 기다리다,
5 성급 등급을위한 5 가지 방법Apr 19, 2025 am 10:04 AM좋아요와 소셜 통계의 세계에서 리뷰는 피드백을 남기는 데 매우 중요한 방법입니다. 사용자는 종종 전에 다른 사람의 의견을 알고 싶어합니다.
클립 경로로 애니메이션Apr 19, 2025 am 09:52 AMClip-Path는 우리가 일반적으로 알고있는 CSS 속성 중 하나이지만 어떤 이유로 든 종종 도달하지 못할 수도 있습니다. 의미가 약간 위협적입니다
Gatsby와 함께 GraphQL 놀이터 사용Apr 19, 2025 am 09:51 AM나는 대부분의 사람들이 이미 개츠비에 대해 들었다고 가정하고 있으며, 적어도 그것이 기본적으로 반응 사이트의 정적 사이트 생성기라는 것을 느슨하게 알고 있습니다. 일반적으로
유형 또는 테스트 : 왜 둘 다 안됩니까?Apr 19, 2025 am 09:50 AM때때로, 토론은 타이핑 된 JavaScript의 가치에 대해 불쾌합니다. "더 많은 테스트를 작성하십시오!" 상대방을 외칩니다. "단위 테스트를 유형으로 교체하십시오!"
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
mPDF
mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.
SublimeText3 영어 버전
권장 사항: Win 버전, 코드 프롬프트 지원!
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
Dreamweaver Mac版
시각적 웹 개발 도구
VSCode Windows 64비트 다운로드
Microsoft에서 출시한 강력한 무료 IDE 편집기
