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 중국어 웹사이트의 기타 관련 기사를 참조하세요!