부동 요소를 수평 및 중앙에 표시하는 방법에 대한 튜토리얼

이 글은 모든 주요 브라우저와 호환되는 플로팅 요소의 수평 및 중앙 표시를 완벽하게 구현하는 코드를 공유합니다. 매우 간단하고 실용적입니다.

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

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

<p class="webFooter">
  <p class="wrap">
    <p 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>
    </p>
  </p>
</p>

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

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;을 제거하여 사용해 볼 수 있습니다.

마지막으로 ul을 bb4ef53b7bbe8f6e1c529c7052ab1904로 변경하고(.inner: float: left; position:relative; left: -50%;에 대해 CSS 작성) .inner Floating에 원하는 내용을 작성할 수 있습니다. 조판(예: QR 코드 사진, 고객 서비스 번호 및 아이콘, Weibo 링크 등).

위 내용은 부동 요소를 수평 및 중앙에 표시하는 방법에 대한 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!