Floating element horizontal and center display and browser compatibility processing, element horizontal

Floating element horizontal and center display and browser compatibility processing, element horizontal

We often encounter a page layout where the content of several different areas is displayed in a row, but they are centered and aligned with the page. Note that the content of these areas is not just text, but may contain images or other elements. In general, we can easily think of floating float, but how to align and be compatible with low-end browsers? Next, let's look at it.

First, check the html code:

<Div class = "webFooter"> <div class = "wrap"> <div class = "tabs"> <ul> <li> <a href = "javascript: void (0) "> high-end platform </a> <em> | </em> </li> <a href =" javascript: void (0) "> about us </a> <em> | </em> </li> <a href =" javascript: void (0) "> Contact Us </a> <em> | </em> </li> <a href =" javascript: void (0) "> Terms of Service </a> <em> | </em> </li> <a href =" javascript: void (0) "> talent recruitment </a> <em> | </em> </li> <a href =" javascript: void (0) "> help center </a> <em> | </em> </li> <a href =" javascript: void (0) "> help center </a> <em> | </em> </li> <a href =" javascript: void (0) "> help center </a> <em> | </em> </li> <a href =" javascript: void (0) "> help center </a> <em> | </em> </li> <a href =" javascript: void (0) "> Customer Service Center </a> </li> </ul> </div>

Some people will say that these items are all text. In fact, it is 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 pixel PX. Of course, it can also be 1000px. The width can be defined as long as it is greater than the content width. Then. tabs float left and set position: relative; left: 50%; then set float: left; position: relative; left:-50% for its internal element ul; finally, you need to give. wrap with overflow: hidden; * position: 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 overflow: hidden; * position: relative should be added to. wrap. Where? The reason is that the content is long, because. tabs's left: 50%; causes its position to exceed. the width range of the wrap. When the display is a little small, the page will display a horizontal scroll bar, and ie7 is stubborn, you need to add * position: relative. If you are interested, you can remove overflow: hidden; * position: relative; and try again, or change the content and try again. I believe there will be a different feeling!

Finally, change ul to <div class = "inner"> (. inner writes css: float: left; position: relative; left:-50%. the inner writes the floating layout you want (for example, a picture of a QR code, a customer service phone number and an icon, and a Weibo link... and so on ).