Tutorial on how to display floating elements horizontally and in the center

This article shares with you the code that perfectly implements the horizontal and centered display of floating elements compatible with all major browsers. It is very simple and practical. Friends in need can refer to it.

We often encounter a page layout that displays several different area contents in a row, but they are centered relative to the page. Note that the content in these areas is not just text, but may also be mixed with images or other elements. Generally, it is easy for us to think of using floating floats for such a layout, but how to center-align it and be compatible with low-end browsers? Please read on.

First look at the html code:

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

Some people will say that these items are all text. In fact, it is also feasible to replace ul with other elements (such as p). . The principle is that .wrap is centered relative to the page, and the width is 1200px. Of course, it can also be 1000px. The width can be freely defined, as long as it is greater than the content width. Then .tabs floats left and sets position: relative; left: 50%; and then sets float: left; position: relative; left: -50%; for its internal element ul. Finally, add overflow: hidden; *position to .wrap : relative;

css code is as follows:

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

Explain why you need to add overflow: hidden; *position: relative;where to .wrap? The reason is that if the content is relatively long, due to the left: 50%; of .tabs, its position exceeds the width range of .wrap. When the display is slightly smaller, a horizontal scroll bar will appear on the page, and ie7 is more stubborn, so *position must be added. : relative; only works. Interested users can try it by removing overflow: hidden;

Finally, change ul to bb4ef53b7bbe8f6e1c529c7052ab1904 (write css for .inner: float: left; position: relative; left: -50%;) and you can add it to .inner Write the floating layout you want (for example: a picture of a QR code, then a customer service phone number and icon, then a link to Weibo...etc.).

The above is the detailed content of Tutorial on how to display floating elements horizontally and in the center. For more information, please follow other related articles on the PHP Chinese website!