CSS에서 가로 가운데 맞춤을 설정하는 방법
- 青灯夜游원래의
- 2021-04-02 16:25:115846검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS로 마우스 스타일을 변경하는 방법다음 기사：CSS로 마우스 스타일을 변경하는 방법