フローティング要素を水平および中央に表示する方法のチュートリアル

この記事では、すべての主要なブラウザと互換性のあるフローティング要素の水平および中央表示を完全に実装するコードを共有します。必要な友人はそれを参照できます。

複数の異なるエリアのコンテンツを連続して表示するページ レイアウトがよくありますが、それらはページに対して中央に配置されています。これらの領域のコンテンツはテキストだけではなく、画像や他の要素が混在する場合もあります。一般に、このようなレイアウトにはフロートを使用することが考えられますが、中央揃えでローエンドのブラウザと互換性を持たせるにはどうすればよいでしょうか?ぜひ読んでください。

まず 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 はページに対して中央に配置され、幅は 1200 ピクセルになります。もちろん、幅はコンテンツの幅より大きい限り、自由に定義できます。次に、 .tabs を float にして、position: left: 50%; を設定し、最後に、 overflow: hidden; を追加します。ラップ : 相対;

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>

なぜ .wrap に overflow: hidden; *position:相対; を追加する必要があるのか​​説明してください。理由は、コンテンツが比較的長い場合、.tabs の left:50%; により、その位置が .wrap の幅の範囲を超えてしまうためです。表示が少し小さい場合、ページ上に横スクロール バーが表示されます。 ie7 はより頑固であるため、 *position を追加する必要があります。興味のあるユーザーは、overflow: hidden; を削除して試してみてください。

最後に、ul を bb4ef53b7bbe8f6e1c529c7052ab1904 に変更します (CSS を .inner: float: left; Position:relative; left: -50%; と書きます)。これで、.inner Floating に必要なものを書くことができます。植字 (例: QR コードの画像、カスタマー サービス番号とアイコン、Weibo へのリンクなど)。

以上がフローティング要素を水平および中央に表示する方法のチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。