CSS에서 가로 가운데 맞춤을 설정하는 방법-CSS 튜토리얼-php.cn

CSS에서 가로 가운데 맞춤을 설정하는 방법

青灯夜游

풀어 주다： 2023-01-04 09:34:22

원래의

5876명이 탐색했습니다.

CSS에서 가로 가운데 맞춤을 설정하는 방법: 1. "text-align: center;" 스타일을 사용하여 블록 수준 요소(상위 요소)에서 인라인 요소를 가로로 가운데에 배치합니다. 2. "margin: 0 auto;" , 블록 수준 요소(상위 요소) 내에서 고정 너비로 블록 수준 요소를 가로 중앙에 배치할 수 있습니다.

CSS에서 가로 가운데 맞춤을 설정하는 방법

이 튜토리얼의 운영 환경: 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>

로그인 후 복사

效果图：

CSS에서 가로 가운데 맞춤을 설정하는 방법

说明：

该种方法仅对文字、图片、按钮等行内元素有效（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>

로그인 후 복사

렌더링:

CSS에서 가로 가운데 맞춤을 설정하는 방법 참고:

이 방법은 텍스트, 그림, 버튼과 같은 인라인 요소에만 유효합니다(display 속성은 inline 또는 inline -block) 가로 중심 맞추기

(학습 동영상 공유: CSS 비디오 튜토리얼

)

방법 2: 여백 속성

🎜🎜을 사용하여 중앙에 맞춰야 하는 하위 요소에 대해 margin: 0 auto; 스타일을 설정합니다. 블록 수준 요소(상위 요소)의 고정 너비 수준 요소는 가로 중앙에 배치됩니다. 🎜rrreee🎜Rendering: 🎜🎜🎜🎜🎜🎜Description: 🎜🎜🎜이 방법은 수평 중앙에만 배치할 수 있으며 부동 요소 위치 지정에는 유효하지 않습니다. 🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜

위 내용은 CSS에서 가로 가운데 맞춤을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!