Tutoriel sur la façon d'afficher des éléments flottants horizontalement et au centre

Cet article partage avec vous le code qui implémente parfaitement l'affichage horizontal et centré des éléments flottants compatible avec tous les principaux navigateurs. C'est très simple et pratique. Les amis dans le besoin peuvent s'y référer.

Nous rencontrons souvent des mises en page qui affichent plusieurs zones de contenu différentes à la suite, mais elles sont centrées par rapport à la page. Notez que le contenu de ces zones n’est pas uniquement du texte, mais peut également être mélangé à des images ou à d’autres éléments. Généralement, il nous est facile de penser à utiliser des flottants pour une telle mise en page, mais comment l'aligner au centre et être compatible avec les navigateurs bas de gamme ? Veuillez continuer à lire.

Premier coup d'oeil au code 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>

Certaines personnes diront que ces éléments sont tous du texte. En fait, il est également possible de le faire. remplacez ul par d'autres éléments (tels que p). Le principe est que .wrap est centré par rapport à la page, et la largeur est de 1200px. Bien entendu, elle peut aussi être de 1000px. La largeur peut être librement définie, à condition qu'elle soit supérieure à la largeur du contenu. Ensuite, .tabs flotte à gauche et définit position: relative; left: 50%; puis définit float: left: relative: -50%; wrap : relative;

Le code CSS est le suivant :

<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>

Expliquez pourquoi vous devez ajouter un débordement : caché *position : relative; lequel .envelopper ? La raison en est que si le contenu est relativement long, en raison de la gauche : 50 % des .tabs, sa position dépasse la plage de largeur de .wrap. Lorsque l'affichage est légèrement plus petit, une barre de défilement horizontale apparaîtra sur la page, et ie7 est plus têtu, donc *position doit être ajouté : relative ne fonctionne que. Les utilisateurs intéressés peuvent l'essayer en supprimant overflow: Hidden;

Enfin, remplacez ul par bb4ef53b7bbe8f6e1c529c7052ab1904 (écrivez du CSS pour .inner : float: left; position: relative; left: -50%;) et vous pourrez l'ajouter à . intérieur Écrivez la mise en page flottante souhaitée (par exemple : une image d'un code QR, puis un numéro de téléphone et une icône du service client, puis un lien vers Weibo... etc.).

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!