CSS에서 글꼴을 중앙에 배치하는 방법은 무엇입니까? 다음 글에서 이를 소개하겠습니다. 도움이 되셨으면 좋겠습니다.
1. CSS는 글꼴을 가로 가운데로 설정합니다.
CSS에서는 text-align 속성을 사용하여 글꼴을 가로 가운데로 설정할 수 있습니다. 이 속성은 중앙 값을 사용하여 텍스트를 중앙에 배치함으로써 요소 내 텍스트의 가로 정렬을 지정합니다.
text-align은 요소의 텍스트 줄이 서로 정렬되는 방식에 영향을 미치는 기본 속성입니다. left, right 및 center 값을 사용하면 요소의 텍스트가 각각 왼쪽 정렬, 오른쪽 정렬 및 가운데 정렬됩니다. 텍스트를 가운데 정렬하려면 center를 사용하면 됩니다.
이 속성은 텍스트 및 img 태그와 같은 일부 인라인 개체(또는 유사한 요소)의 중심 정렬을 설정합니다.
이 속성은 다음과 같은 특징을 가집니다.
1) 텍스트 정렬의 중심은 컨테이너의 텍스트만 대상으로 하며 컨테이너의 표시는 인라인 또는 인라인 블록입니다. 컨테이너 표시가 블록이면 내부 컨테이너의 내용이 중앙에 위치하지 않습니다.
2) 텍스트 정렬은 하향 전이적이며 계속해서 하위 요소로 전달됩니다. div를 설정하면 하위 div의 콘텐츠도 중앙에 배치됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 水平居中</title>
<style>
.box {
width: 400px;
height: 100px;
background: #ddd;
text-align:center;
}
</style>
</head>
<body>
<div class="box">css 水平居中了--文本文字</div>
</body>
</html>Rendering:
2. CSS는 글꼴을 수직 중앙에 위치하도록 설정합니다.
1. line-height 속성은 텍스트를 수직 중앙에 위치시킵니다. --- 한 줄 글꼴
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 300px;
background: #ddd;
line-height:300px;
}
</style>
</head>
<body>
<div class="box">css 垂直居中了--文本文字</div>
</body>
</html>Rendering:
이렇게 하면 div의 텍스트가 가로 및 세로 가운데에 배치될 수 있습니다
2. CSS3 flex 레이아웃은 텍스트를 세로로 가운데에 배치합니다. 에드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 300px;
background: #ddd;
line-height:300px;
/*设置为伸缩容器*/
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>Rendering:
3.vertical-align:middle +display:table-cell 텍스트를 세로로 가운데 정렬합니다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box {
width: 300px;
height: 300px;
background: #ddd;
vertical-align:middle;
display:table-cell;
}
</style>
</head>
<body>
<div class="box">css 水平居中了--文本文字,文本文字,文本文字,文本文字,文本文字,文本文字。</div>
</body>
</html>렌더링:
설명: Vertical-align:middle +display:table-cell은 한 줄 텍스트와 여러 줄 텍스트를 모두 가운데에 배치할 수 있습니다. 그러나 table-cell은 인라인 유형이므로 원래 블록 수준 요소가 div당 동일한 행으로 이동됩니다. 행을 두 행으로 나누어야 하는 경우 외부에 별도의 컨테이너를 추가하여 위치를 조절해야 합니다.
위 내용은 CSS에서 글꼴을 가운데에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
