CSS에서 텍스트를 가운데에 배치하는 방법-CSS 튜토리얼-php.cn

CSS에서 텍스트를 가운데에 배치하는 방법

醉折花枝作酒筹

풀어 주다： 2023-01-05 16:09:02

원래의

55628명이 탐색했습니다.

방법: 1. text-align 속성을 사용하여 텍스트를 가로 가운데로 설정합니다("text-align:center" 구문). 2. line-height 속성을 사용하여 텍스트를 세로 가운데로 설정합니다. "line-height: value"; 3. CSS3 사용 플렉스 레이아웃은 텍스트를 수직 중앙에 배치합니다.

CSS에서 텍스트를 가운데에 배치하는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

1. 텍스트를 가로로 가운데 정렬하려면 text-align 속성을 사용하세요.

text-align 속성은 요소 내 텍스트의 가로 정렬을 지정하고, center 값을 사용하여 텍스트가 가운데에 오도록 설정합니다.

text-align은 요소의 텍스트 줄이 서로 정렬되는 방식에 영향을 미치는 기본 속성입니다. left, right 및 center 값을 사용하면 요소의 텍스트가 각각 왼쪽 정렬, 오른쪽 정렬 및 가운데 정렬됩니다. 텍스트를 가운데 정렬하려면 center를 사용하면 됩니다.

이 속성은 텍스트 및 img 태그와 같은 일부 인라인 개체(또는 유사한 요소)의 중심 정렬을 설정합니다.

이 속성은 다음과 같은 특징을 가집니다.

1) 텍스트 정렬의 중심은 컨테이너의 텍스트만 대상으로 하며 컨테이너의 표시는 인라인 또는 인라인 블록입니다. 컨테이너 표시가 블록이면 내부 컨테이너의 내용이 중앙에 위치하지 않습니다.

2) 텍스트 정렬은 하향 전이적이며 계속해서 하위 요소로 전달됩니다. div를 설정하면 하위 div의 콘텐츠도 중앙에 배치됩니다.

nbsp;html>

	
		<meta>
		<title>css 水平居中</title>
		<style>
			.box {
				width: 400px;
				height: 100px;
				background: pink;
				text-align:center;
			}
		</style>
	
	
		<div>css 水平居中了--文本文字</div>

로그인 후 복사

렌더링:

CSS에서 텍스트를 가운데에 배치하는 방법

2. line-height 속성을 사용하여 텍스트를 세로로 가운데에 배치합니다.

line-height 속성은 줄 사이의 거리(줄 높이)를 설정합니다. 음수 값은 허용되지 않습니다.

이 속성은 라인 상자의 레이아웃에 영향을 미칩니다. 블록 수준 요소에 적용하면 최대 거리가 아닌 해당 요소의 기준선 간 최소 거리를 정의합니다.

nbsp;html>

	
		<meta>
		<title>css 垂直居中</title>
		<style>
			.box {
				width: 300px;
				height: 300px;
				background: paleturquoise;
				line-height:300px;
			}
		</style>
	
	
		<div>css 垂直居中了--文本文字</div>

로그인 후 복사

렌더링:

CSS에서 텍스트를 가운데에 배치하는 방법

3, 텍스트를 세로로 가운데에 배치하는 CSS3 플렉스 레이아웃

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css 垂直居中</title>
        <style>
            .box{
                width: 300px;
                height: 200px;
                background: #ccc;
                 /*设置为伸缩容器*/
                display: -webkit-box;
                display: -moz-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                /*垂直居中*/
                -webkit-box-align: center;/*旧版本*/
                -moz-box-align: center;/*旧版本*/
                -ms-flex-align: center;/*混合版本*/
                -webkit-align-items: center;/*新版本*/
                align-items: center;/*新版本*/
            }
        </style>
    </head>
    <body>
        <div class="box">css 垂直居中--文本文字（弹性布局）</div>
    </body>
</html>

로그인 후 복사

효과:

CSS에서 텍스트를 가운데에 배치하는 방법