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

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

이 튜토리얼의 운영 환경: 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(수직 중앙)로 설정합니다. 가로, 세로 가운데에 위치하도록 설정할 수 있습니다.

76c82f278ac045591c9159d381de2c57
9fd01892b579bba0c343404bcccd70fb
93f0f5c25f18dab9d176bd4f6de5d30e
    a80eb7cbb6fff8b0ff70bae37074b813
    8f6d5a544bbc0d98e0f297ef053f784d
    ef0e6bda9678de73355aeb4407692a87
    b2386ffb911b14667cb8f0f91ea547a7Document6e916e0f7d1e588d4f442bf645aedb2f
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
    f0873f1cb3abec04fcd24e69fa165f9c
        45a2772a6b6107b401db3c9b82c049c2测试54bdf357c58b8a65c66d7c19c8e4d114
16b28748ea4df4d9c2150843fecfba68
46d5fe1c7617e3914f214aaf043f4ccf
.mydiv{
    width:200px;
    height:100px;
    border:1px solid black;
    display:flex;
    align-items:center;
    justify-content:center;
}
531ac245ce3e4fe3d50054a55f265927
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

더 많은 프로그래밍 관련 지식을 보려면

프로그래밍 비디오

를 방문하세요! !

위 내용은 CSS의 정렬 방법은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!