플로팅 요소의 수평 및 중앙 표시를 완벽하게 구현

플로팅 요소의 수평 및 중앙 표시를 완벽하게 구현_기본 튜토리얼

WBOY

풀어 주다： 2016-05-16 12:03:39

원래의

1449명이 탐색했습니다.

여러 콘텐츠 영역을 연속적으로 표시하지만 페이지를 기준으로 중앙에 배치되는 페이지 레이아웃을 자주 접하게 됩니다. 이 영역의 콘텐츠는 단순한 텍스트가 아니라 이미지나 기타 요소와 혼합될 수도 있습니다. 일반적으로 이러한 레이아웃에 부동 부동 소수점을 사용하는 것을 생각하기 쉽지만 이를 중앙 정렬하고 저가형 브라우저와 호환하려면 어떻게 해야 할까요? 계속 읽어주세요.

먼저 HTML 코드를 살펴보세요:

<div class="webFooter">
  <div class="wrap">
    <div class="tabs">
      <ul>
        <li>
          <a href="javascript:void(0)">高大上平台</a><em>|</em>
        </li>
        <li>
          <a href="javascript:void(0)">关于我们</a><em>|</em>
        </li>
        <li>
          <a href="javascript:void(0)">联系我们</a><em>|</em>
        </li>
        <li>
          <a href="javascript:void(0)">服务条款</a><em>|</em>
        </li>
        <li>
          <a href="javascript:void(0)">人才招聘</a><em>|</em>
        </li>
        <li>
          <a href="javascript:void(0)">帮助中心</a><em>|</em>
        </li>
        <li>
          <a href="javascript:void(0)">帮助中心</a><em>|</em>
        </li>
        <li>
          <a href="javascript:void(0)">帮助中心</a><em>|</em>
        </li>
        <li>
          <a href="javascript:void(0)">帮助中心</a><em>|</em>
        </li>
        <li>
          <a href="javascript:void(0)">客服中心</a>
        </li>
      </ul>
    </div>
  </div>
</div>

로그인 후 복사

어떤 사람들은 이 항목이 모두 텍스트라고 말할 것입니다. 실제로 ul을 다른 요소(예: div)로 바꾸는 것도 가능합니다. 원칙적으로 .wrap은 페이지를 기준으로 중앙에 위치하며 너비는 1200px입니다. 물론 너비는 콘텐츠 너비보다 크면 자유롭게 정의할 수 있습니다. 그런 다음 .tabs는 왼쪽으로 이동하고 position:relative; left: -50%를 설정합니다. 마지막으로 ul에 추가합니다. 포장 : 상대;

CSS 코드는 다음과 같습니다.

<style type="text/css">
body, ul, li, ol, dl, dt, dd {padding: 0; margin: 0; list-style: none;}
.webFooter {height: 100px; font-size: 12px; background: #278ed1; font-family: Microsoft YaHei; color: #fff;}
.webFooter a,
.webFooter a:hover {color: #fff;}
.webFooter .wrap {width: 1200px; margin-left: auto; margin-right: auto; background: red; overflow: hidden; *position: relative;}
.webFooter .tabs {float: left; position: relative; left: 50%; margin-top: 25px;}
.webFooter .tabs ul {float: left; position: relative; left: -50%;}
.webFooter .tabs li {float: left; line-height: 17px;}
.webFooter .tabs a {float: left; font-size: 14px;}
.webFooter .tabs em {float: left; width: 20px; height: 15px; *line-height: 15px; text-align: center;}
</style>

로그인 후 복사

overflow:hidden; *position:relative;를 추가해야 하는 이유를 설명하세요. 그 이유는 콘텐츠가 .tabs의 50%로 인해 상대적으로 길면 해당 위치가 .wrap의 너비 범위를 초과하기 때문입니다. 디스플레이가 약간 더 작으면 페이지에 가로 스크롤 막대가 나타납니다. ie7은 더 완고하므로 *위치를 추가해야 합니다. : 상대만 작동합니다. 관심 있는 사용자는 Overflow: Hidden; *position:relative;를 제거하거나 내용을 변경하여 다시 시도해 볼 수 있습니다.

마지막으로 ul을

로 변경하면(.inner: float: left; position:relative; left: -50%;에 대해 CSS 작성) .inner에 원하는 내용을 작성할 수 있습니다. 플로팅 레이아웃이 필요합니다(예: QR 코드 사진, 고객 서비스 전화번호 및 아이콘, Weibo 링크 등).