이 글에서는 주로 CSS 플로팅 요소의 센터링에 대해 소개합니다. 모두에게 센터링은 페이지를 의미합니다. 이때 일반적으로 CSS 플로팅 요소를 센터링하는 예를 살펴보겠습니다. . 모두를 찾는 데 도움이 되기를 바랍니다.
<script>ec(2);</script>
플로팅 요소의 센터링과 관련하여 실제로는 많이 사용되지 않지만 이상한 면접관을 상대하려면 이 문제를 해결하는 방법을 알아야 합니다.
CSS 코드 일부 게시:
width:50%; height:300px; float:left; margin-left:50%; position:relative; left:-25%;background-color:#ccc;
핵심은 왼쪽 여백을 준 다음 왼쪽 값이 p 너비의 절반이 되도록 배치하는 것입니다.
실제로 이 방법은 팝업창을 만들어 브라우저 중앙에 배치할 때 흔히 사용하는 방법이기도 합니다. 위치에 왼쪽(상단) 여백과 왼쪽(상단) 값을 부여합니다.
Example
<style type="text/css">
.ps{background:#ccc;width:600px;height:300px;margin:50px auto 0;}
.ps p{margin:0 auto;background:#000;width:400px;text-align:center;}
p{float:left;height:100px;width:98px;background:#fff;border:1px solid red;margin:0 auto;}
</style>
<body>
<p class="ps">
<p>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
</p>
</p>
</body>센터링 효과도 얻을 수 있지만 확장성이 좋지 않다는 것을 발견했습니다. p를 삭제하거나 p를 추가하는 경우 .ps p 스타일에서 너비를 수정해야 합니다.
관련 권장사항:
위 내용은 CSS 부동 요소 센터링 정보의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
