CSS 부동 요소 센터링 정보-CSS 튜토리얼-php.cn

CSS 부동 요소 센터링 정보

小云云

풀어 주다： 2017-12-13 13:10:06

원래의

3356명이 탐색했습니다.

이 글에서는 주로 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 스타일에서 너비를 수정해야 합니다.