Shulou(Shulou.com)06/03 Report--

This article is about how css can center elements horizontally with fixed layouts and streaming layouts. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

First of all, to center elements horizontally, you must understand the concepts of fixed layout and streaming layout in css design. The intuitive difference between them depends on whether the width is set for the element. Here are two pieces of code that simply illustrate the difference between fixed layout and streaming layout.

1. Fixed layout demo:

The code is as follows:

Position-layout

.wrapper {width:750px;position:relative;margin:0 auto;text-align:left;}

.contentArea {width:450px;position:absolute;top:0;left:150px;height:500px;background:#96c;}

.leftPanel {width:150px;position:absolute;top:0;left:0;height:500px;background:#999;}

.rightPanel {width:150px;position:absolute;top:0;left:600px;height:500px;background:#06C;}

2. Streaming layout demo:

The code is as follows:

Col3-margin-layout

.contentArea {margin:0 160pxposition heightbank 500pxscape backgroundposition 96c;}

.leftPanel {width:150px;float:left;height:500px;background:#999;}

.rightPanel {width:150px;float:right;height:500px;background:#06C;}

From the above two examples, it can be concluded that there is no possibility of horizontal center of the element in the streaming layout, because it is displayed on the full screen. There is only a fixed layout, and because of the width limit, it is possible to center the element horizontally.

Second, the implementation of a fixed layout does not have to center the elements horizontally. the reason for doing so is to leave an average narration on both sides of the browser, rather than a large amount of blank space on one side, affecting beauty.

It's all simple knowledge, so let's get to the topic.

=

There are three ways to center elements horizontally, which I will introduce separately. As follows:

1. Automatic outer margin method.

This is currently the most familiar method for web designers, which requires setting the width of the container and setting the margin:auto style. Here is a piece of code:

The code is as follows:

Position-layout

.wrapper {width:750px;margin:0 auto;position:relative;}

.contentArea {width:450px;position:absolute;top:0;left:150px;height:500px;background:#96c;}

.leftPanel {width:150px;position:absolute;top:0;left:0;height:500px;background:#999;}

.rightPanel {width:150px;position:absolute;top:0;left:600px;height:500px;background:#06C;}

Through this code, you can find that this method can be well displayed in a variety of mainstream browsers (including ie6), only the version below ie6 does not take effect, and the elements are still arranged to the left. It will be the most convenient if you don't consider the problem of lower-version browsers.

2. The combination of text centering and automatic margin.

This approach can solve the problem that the following versions of ie6 do not support margin:0 auto, and its use is to set the text-align:center style in body. The specific code is as follows:

The code is as follows:

Position-layout

Body {text-align:center;}

.wrapper {width:750px;position:relative;margin:0 auto;text-align:left;}

.contentArea {width:450px;position:absolute;top:0;left:150px;height:500px;background:#96c;}

.leftPanel {width:150px;position:absolute;top:0;left:0;height:500px;background:#999;}

.rightPanel {width:150px;position:absolute;top:0;left:600px;height:500px;background:#06C;}

Here, text-align:center is used as css hack because it belongs to the style of text. It is used in body to achieve the style of centered elements, doing things that do not belong to you.

3. Negative outer margin method.

The implementation of this approach is more complex than the first two. It has to be used in combination with positioning. The specific code is as follows:

The code is as follows:

Negative-margin-element-center

.wrapper {width:750px;position:relative;left:50%;margin-left:-375px;}

.contentArea {width:450px;position:absolute;top:0;left:150px;height:500px;background:#96c;}

.leftPanel {width:150px;position:absolute;top:0;left:0;height:500px;background:#999;}

.rightPanel {width:150px;position:absolute;top:0;left:600px;height:500px;background:#06C;}

First, offset the container 50% to the right relative to the document, and then set the left margin of the container to half of the negative container width to achieve the horizontal center display of the element. This approach is hack-free, compatible and consistent in the widest range of browsers.

The above is all the content of the article "how to achieve horizontal display of elements in css with fixed layout and streaming layout". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.