CSS를 사용하여 유연한 상자의 요소를 가운데 정렬하는 방법-CSS 튜토리얼-php.cn

CSS를 사용하여 유연한 상자의 요소를 가운데 정렬하는 방법

藏色散人

풀어 주다： 2021-04-21 17:01:45

원래의

14480명이 탐색했습니다.

CSS 방법으로 유연한 상자에서 요소를 가운데 정렬할 수 있습니다. 먼저 HTML 샘플 파일을 만든 다음 "display:flex;" 속성을 사용하여 마지막으로 상자에 유연한 레이아웃 속성을 부여합니다. CSS Align-items의 "display:flex;" 속성을 사용하고 기타 관련 속성을 사용하여 유연한 상자에 있는 요소의 가운데 정렬 효과를 얻을 수 있습니다.

CSS를 사용하여 유연한 상자의 요소를 가운데 정렬하는 방법

이 문서의 운영 환경: windows7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.

css는 웹 디자인에서 상대적으로 일반적인 기능적 효과인 요소 정렬(유연한 상자의 각

요소를 중앙 정렬)을 실현합니다. CSS의 align-items와 같은 관련 CSS 속성을 통해 이를 달성할 수 있습니다.

아래에서는 특정 코드 예제를 사용하여 CSS를 사용하여 유연한 상자의 요소를 가운데 정렬하는 방법을 소개합니다.

코드 예시는 다음과 같습니다:

<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
    <title></title>
    <style type="text/css">
        #xyz {
            width: 200px;
            height: 250px;
            border: 1px solid black;
            display: -webkit-flex; /* Safari */
            -webkit-align-items: center; /* Safari 7.0+ */
            display: flex;
            align-items: center;
        }
        #xyz div {
            -webkit-flex: 1; /* Safari 6.1+ */
            flex: 1;
        }
    </style>

</head>
<body>
<div id="xyz">
    <div style="background-color:#99FF99;">内容1</div>
    <div style="background-color:#33CCFF;">一些文件的内容</div>
    <div style="background-color:#FF99FF;">内容2</div>
</body>
</html>

로그인 후 복사

효과는 다음과 같습니다:

CSS를 사용하여 유연한 상자의 요소를 가운데 정렬하는 방법