CSS의 정렬 방법은 무엇입니까-CSS 튜토리얼-php.cn

CSS의 정렬 방법은 무엇입니까

WBOY

풀어 주다： 2021-11-18 14:30:29

원래의

7767명이 탐색했습니다.

방법: 1. "text-align:center" 스타일을 사용하여 수평 중앙 정렬을 구현합니다. 2. "line-height: line height;" 스타일을 사용하여 수직 중앙 정렬을 구현합니다. 3. "align-items:center;justify-content:center" 스타일을 사용하여 수평 및 수직 중앙 정렬을 구현합니다.

CSS의 정렬 방법은 무엇입니까

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

css의 정렬 방법은 무엇입니까

1. 가로 센터링

인라인 요소의 가로 센터링

요소가 텍스트, 그림 등 인라인 요소로 설정된 경우 ., 상위 요소에서 text-align:center를 설정하여 인라인 요소의 수평 중앙 정렬을 달성하고 하위 요소의 표시를 inline-block으로 설정하여 하위 요소가 인라인 요소가 되도록 설정합니다

<div class="parent" style="background-color: gray;">
  <div class="child" style="background-color: lightblue;">DEMO</div></div>
<style>
.parent{text-align: center;}    
.child{display: inline-block;}
</style>

로그인 후 복사

블록 요소의 수평 중앙 정렬(고정됨) width)

설정되는 요소가 고정 너비 블록 수준 요소인 경우 text-align: center가 작동하지 않습니다. "왼쪽 및 오른쪽 여백" 값을 "자동"으로 설정하면 가운데 정렬이 가능합니다.

<div class="parent" style="background-color: gray;">
  <div class="child" style="background-color: lightblue;">DEMO</div>
  </div>
  <style>
.child{
            width: 200px;
            margin: 0 auto;
        }
        </style>

로그인 후 복사

블록 요소의 수평 중심화(무한 폭)

실제 작업에서는 웹 페이지의 페이징 탐색과 같이 "가변 너비의 블록 수준 요소"에 대해 중심을 설정해야 할 필요성에 직면하게 됩니다. , 페이지 매기기 수가 정의되지 않았기 때문에 너비를 설정하여 유연성을 제한할 수 없습니다.

이를 달성하기 위해 가변 너비의 블록 수준 요소에 대해 text-align:center를 직접 설정하거나 상위 요소에 text-align:center를 추가하여 중심화 효과를 얻을 수 있습니다.

가변 너비 블록 수준 요소의 너비가 한 줄을 차지하지 않는 경우 표시를 인라인 유형 또는 인라인 블록으로 설정할 수 있습니다(인라인 요소 표시 또는 인라인 블록 요소로 설정)

<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
<style>
.container{text-align:center;background: beige}
.container ul{list-style:none;margin:0;padding:0;display:inline-block;}
.container li{margin-right:8px;display:inline-block;}
</style>

로그인 후 복사

2. 센터링

및 수평 센터링 마찬가지로 여기서는 수직 센터링에 대해 이야기하고 싶습니다. 먼저 두 가지 조건을 설정하십시오. 상위 요소는 상자 컨테이너이고 하위 요소는 인라인 요소이며 높이가 지원됩니다. 이 경우 하위 요소를 세로로 가운데에 배치하려면 상위 요소의 줄 높이를 해당 높이로 설정해야 합니다.

<div class="wrap line-height">
    <span class="span">111111</span></div>
<style>
.wrap{
            width:200px ;
            height: 300px;
            line-height: 300px;
            border: 2px solid #ccc;
        }
.span{
            background: red;
        }
</style>

로그인 후 복사

3. 가로 및 세로로 가운데 맞춤

CSS 태그에서 flex 레이아웃을 구현하기 위해 flex에 display 속성을 추가한 다음 align-items 속성을 center(가로 중앙)로 설정하고 justify-content 속성을 center(수직 중앙)로 설정합니다. 가로, 세로 가운데에 위치하도록 설정할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="mydiv">
        <span>测试</span>
</div>
<style type="text/css">
.mydiv{
    width:200px;
    height:100px;
    border:1px solid black;
    display:flex;
    align-items:center;
    justify-content:center;
}
</style>
</body>
</html>

로그인 후 복사

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오
를 방문하세요! !
위 내용은 CSS의 정렬 방법은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!