다음 편집자는 CSS 처리의 수평 중심화 문제에 대해 간략하게 논의할 것입니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리고자 합니다. 와서 편집기와 함께 살펴보세요. 모두 행복한 게임이 되시길 바랍니다
1. 가로 중심 설정 - 인라인 요소
1개 설정 text-align:center through 상위 요소 ; 상위 요소의 내용을 중앙에 배치합니다
2. 가로 중심 설정 - 고정 너비 블록 요소
블록 요소의 너비는 고정됩니다. 값, ""왼쪽 및 오른쪽 여백" 값을 "자동"으로 설정하면 가운데 맞춤이 이루어집니다.
예:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>定宽块状元素水平居中</title> <style> p{ width: 200px;/*固定的宽度*/ margin: 20px auto;/*左右margin设置为auto*/ border: 1px solid red; } </style> </head> <body> <p>我是定宽块状元素,我要水平居中显示。</p> </body> </html>
3. 가로 가운데 맞춤 설정 - 가변 너비 블록 요소
방법 1. 테이블 태그 추가
예:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>不定宽块状元素水平居中</title> <style> table{ margin:0 auto; } /*下面是任务区代码*/ .wrap{ background:#ccc; } </style> </head> <body> <table> <tbody> <tr><td> <p class="wrap"> 我要水平居中 </p> </td></tr> </tbody> </table> </body> </html>
방법 2. 첫 번째 방법과 유사하게 display:inline 방법을 설정하고, 디스플레이 유형을 inline으로 설정합니다. 요소 및 가변 너비 요소 수행 속성 설정
예:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>不定宽块状元素水平居中</title> <style> .container{text-align:center;} .container ul{list-style:none;margin:0;padding:0;display:inline;} .container li{margin-right:8px;display:inline;} </style> </head> <body> <p class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </p> </body> </html>
방법 3. 위치 설정:상대적 왼쪽:50% 상대 위치 지정 방법을 사용하려면 요소를 왼쪽으로 50% 오프셋합니다. 즉, 중앙 정렬 목적을 달성하기 위해
예:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>不定宽块状元素水平居中</title> <style> /*下面是代码任务区*/ .wrap{ clear:both; float:left; position:relative; left:50% } .wrap-center{ background:#ccc; position:relative; left:-50%; } </style> </head> <body> <!--下面是代码任务区--> <p class="wrap"> <p class="wrap-center">我们来学习一下这种方法。</p> </p> </body> </html>
위 글은 CSS의 수평 중심화에 대해 간략하게 이야기하고 있습니다. 질문은 편집자가 공유한 모든 내용이 여러분에게 참고가 되기를 바라며, 또한 모든 분들이 PHP 중국어 웹사이트를 지지해 주시길 바랍니다.
CSS 처리 수준 센터링에 대한 더 많은 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!