Shulou(Shulou.com)05/31 Report--

This article mainly explains "CSS level in the middle of the method case analysis", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Now let the editor to take you to learn the "CSS level in the middle of the method case analysis" bar!

(1) horizontal center of text, pictures and other elements in the line

Set text-align:center to the parent element to achieve the horizontal center of text, images and other elements in the line. The code is as follows:

.wrap {text-align:center;background:#ccc;margin-bottom:10px;color:red;}

Hello word

The effect is as follows:

(2) horizontal center of block-level elements that determine the width

The horizontal centering of block-level elements that determine the width is achieved by setting margin-left:auto;margin-right:auto;, as follows

.wrap {width:500px;height:100px;background:#ccc;}

.test {width:200px;height:50px;background:red;margin:0 auto;}

The effect is as follows:

(3) the horizontal center of block-level elements with uncertain width

There are three ways to achieve the horizontal center of block-level elements with uncertain widths. Here is an example of paging. Because the number of pages is uncertain, we cannot limit its flexibility by setting the width.

Method 1:

.wrap {background:red;}

Ul,li {list-style:none;margin:0;padding:0;}

Table {margin-left:auto;margin-right:auto;background:#ccc;}

.test li {float:left;display:inline;margin-right:5px;}

one

one

two

one

two

three

The effect is as follows:

Method 1 demonstrates the example that the paging module can be centered when there are one, two, or three paging respectively. The ul tag is the root element of the whole paging module, and the number of li it contains is uncertain, so the width of the ul itself cannot be determined, so the margin-left and margin-right:auto settings cannot be centered through a fixed width. Here, a table is used to help achieve the horizontal center of block-level elements with uncertain widths. The interesting thing about table is that it is not a block-level element, if you don't set the width for it. Its own width is "propped up" by internal elements, even if it is not set width, only set margin-left:auto, margin-right:auto to achieve the center, indirectly make the ul center

Method 2:

Ul,li {list-style:none;margin:0;padding:0;}

.wrap {width:500px;height:100px;background:#ccc;}

.test {text-align:center;padding:5px;}

.test li {display:inline;padding-right:10px;}

one

one

two

one

two

three

The effect is as follows:

The idea of this method is to change the block-level element to line type, and then realize the center through text-align:center, which is simpler than method one. Its advantage is that it does not need to add non-semantic tags, which simplifies the nesting depth of tags, but it also has some problems: converting block-level elements to inline elements, in-line elements have less functions than block-level elements, such as setting length and width values, in some special needs css settings There may be some restrictions.

Method 3:

Ul {list-style:none;margin:0;padding:0;}

.wrap {background:#ccc;width:500px;height:100px;}

.test {clear: both;float:left;padding-top:5px;position:relative;left:50%;}

.test li {position:relative;left:-50%;margin-right:5px;float:left;display:inline;}

one

one

two

one

two

three

The effect is as follows:

The third method is to set float for the parent element, and then set the position:relative and left:50%; child elements to set position:relative and left:-50% to achieve horizontal centering. This method can keep the block-level elements still displayed in the form of display:block without adding no semantic tags.

At this point, I believe that you have a deeper understanding of the "CSS level in the middle of the method case analysis", might as well come to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.