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:
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:
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
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
