CSS 속성을 사용하여 왼쪽 정렬, 가운데 정렬, 오른쪽 정렬, 세로 가운데 정렬 등 다양한 정렬을 구현합니다.
방법 1: float 속성을 사용하여 왼쪽 및 오른쪽 정렬 설정
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>实例</title> <title>php.cn</title> <style type="text/css"> .divcss5-left{float:left;width:250px;height:50px;border:1px solid #F00} </style> </head> <body> <div class="divcss5-left">此DIV靠左对齐显示</div> </body> </html>
방법 2: 가운데 정렬에 여백 속성 사용
중앙에 오도록 스타일에 margin:0 auto만 추가하세요.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>实例</title> <title>php.cn</title> <style type="text/css"> .divcss5-cent{margin:0 auto;width:250px;height:50px;border:1px solid #F00} </style> </head> <body> <div class="divcss5-cent">此DIV居中对齐显示</div> </body> </html>
방법 3: 위치 속성을 사용하여 왼쪽 및 오른쪽 정렬 설정
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>实例</title> <title>php.cn</title> <style type="text/css"> .divcss5-cent { position:absolute; right:0px; width:250px; height:50px; border:1px solid #F00 } </style> </head> <body> <div class="divcss5-cent">此DIV右对齐显示</div> </body> </html>
다중 속성 수직 중앙 정렬 사용:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>实例</title> <title>php.cn</title> <style type="text/css"> .wrp { background-color: #b9b9b9; width: 340px; height: 260px; } .box { color: white; background-color: #3e8e41; width: 200px; height: 120px; overflow: auto; } .wrp1 { position: relative; } .box1 { margin: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } </style> <body> <div class="wrp wrp1"> <div class="box box1"> <h3>完全居中:</h3> <h3>利用css定位规则,设置左右、上下方向定位为0,margin为auto</h3> </div> </div> </body> </html>