Perfectly realize the horizontal and centered display of floating elements_Basic Tutorial

we often encounter page layouts that display several different areas of content 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:

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

some people will say that these items are all text. in fact, it is also feasible to replace ul with other elements (such as div). 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;

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

(write css for .inner: float: left; position: relative; left: -50%;) and you can write the float you want in .inner typesetting (for example: a picture of a qr code, a customer service phone number and icon, and then a link to weibo...etc.).