Center effect in CSS is very common effect, usually we see the center effect is divided into three main categories: Horizontal center, vertical center and horizontal vertical center. and the horizontal center is much simpler in relation to the latter two. Early summed up the internet on the horizontal vertical center of several implementation schemes, for example, "CSS production horizontal vertical alignment," described in the eight to achieve horizontal vertical scheme, and in the "CSS production of horizontal vertical picture horizontally" Article introduces four kinds of picture to achieve vertical center of the program, and in the " CSS3 Horizontal Vertical centering uses the CSS3 Flexbox property to easily center multiple lines of text horizontally vertically. Of course, you might think that these methods are too annoying for the compatibility of browsing Gaga, and that some people use the jquery method to achieve horizontal vertical centering, for example, in the "jquery elements are vertically centered horizontally on the screen."
Back to our topic today, the level of the implementation of the center, we are most familiar with the margin to the element set a display width, and then add the left and right values for auto. Such as:
. Center {
width:960px;
Margin-left:auto;
Margin-right:auto;
}
This method is most convenient to center the elements that know the width, but in many cases we cannot determine the width of the element container. In other words, when there is no clear width, the above method does not allow us to center the element horizontally. So what do we do? That's the question we need to discuss today.
To better illustrate the problem, let's look at a code that makes a paging effect:
Html
To add a style to pagination:
. pagination Li {
line-height:25px;
}
. pagination a {
Display:block;
Color: #f2f2f2;
text-shadow:1px 0 0 #101011;
Padding:0 10px;
border-radius:2px;
box-shadow:0 1px 0 #5a5b5c inset,0 1px 0 #080808;
Background:linear-gradient (Top, #434345, #2f3032);
}
. pagination A:hover {
Text-decoration:none;
box-shadow:0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
Background:linear-gradient (Top, #f48b03, #c87100);
}
This is a very common style code, the initial effect:
Pagination Navigation effect
This is obviously not the effect we need, and then we'll make it in several ways:
First, margin and width to achieve horizontal center
The first method is the oldest implementation, is the most common solution, in the paging container to define a width, and then with the margin left and right values for the "auto" implementation effect:
. pagination {
width:293px;
Margin-left:auto;
Margin-right:auto;
}
. pagination Li {
line-height:25px;
Display:inline;
Float:left;
Margin:0 5px;
}
. pagination a {
Display:block;
Color: #f2f2f2;
text-shadow:1px 0 0 #101011;
Padding:0 10px;
border-radius:2px;
box-shadow:0 1px 0 #5a5b5c inset,0 1px 0 #080808;
Background:linear-gradient (Top, #434345, #2f3032);
}
. pagination A:hover {
Text-decoration:none;
box-shadow:0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
Background:linear-gradient (Top, #f48b03, #c87100);
}
The green part of the code is the code that is added to achieve a page-centered effect. (There is no special declaration below, and the green section code represents the newly added code.) ), first look at the effect:
Pagination Navigation effect
The effect is that we achieve it, but its extensibility is not necessarily strong. The example shows only five pages and seven explicit items that go backwards, but often we don't know how many page entries are displayed in many cases, and we cannot determine the width of each paging option, and cannot confirm the width of the container.
Advantages: The realization method is simple and understandable, the browser compatibility is strong;
Disadvantage: Poor scalability, can not be adaptive to the unknown case.
Two, the Inline-block realizes the horizontal center method
This method was involved in the early "How to solve the blank spacing of inline-block elements" and "CSS3-made pager", but it was not extracted separately. This time, take this method out to say.
Only the Inline-block property is unable to center the element horizontally, and his key point is to set the Text-align property in the parent container of the element to "center" so that the effect can be achieved:
. pagination {
Text-align:center;
font-size:0;
Letter-spacing: -4px;
Word-spacing: -4px;
}
. pagination Li {
line-height:25px;
Margin:0 5px;
Display:inline-block;
*display:inline;
Zoom:1;
Letter-spacing:normal;
Word-spacing:normal;
font-size:12px;
}
. pagination a {
Display:block;
Color: #f2f2f2;
text-shadow:1px 0 0 #101011;
Padding:0 10px;
border-radius:2px;
box-shadow:0 1px 0 #5a5b5c inset,0 1px 0 #080808;
Background:linear-gradient (Top, #434345, #2f3032);
}
. pagination A:hover {
Text-decoration:none;
box-shadow:0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
Background:linear-gradient (Top, #f48b03, #c87100);
}
The effect is as follows:
Pagination Navigation effect
This method is relatively simple to understand, but the use of inline-block to solve the problem of horizontal center, but also produced a new problem, that is, the page entry and page entry by the return of the blank space, then the uninformed students will not know how to solve? (and this spacing is not all browsers have), so need to solve the inline-block brought by the spacing, detailed solution can read the "How to solve the inline-block elements of white space," the article.
Do point: Easy to understand, strong scalability;
Disadvantage: Additional processing of Inline-block browser compatibility is required.
Three, floating to achieve horizontal center method
Just see the title, you may feel very surprised, the elements are floating, he can also be horizontally centered? As we all know, floating is either left or right, and it's rare to be centered. In fact, there is a slight processing.
. pagination {
Float:left;
width:100%;
Overflow:hidden;
position:relative;
}
. pagination UL {
Clear:left;
Float:left;
position:relative;
left:50%;/* the entire paging to the right to move the width of the 50%*/
Text-align:center;
}
. pagination Li {
line-height:25px;
Margin:0 5px;
Display:block;
Float:left;
position:relative;
right:50%;/* each page item to the left to move the width of the 50%*/
}
. pagination a {
Display:block;
Color: #f2f2f2;
text-shadow:1px 0 0 #101011;
Padding:0 10px;
border-radius:2px;
box-shadow:0 1px 0 #5a5b5c inset,0 1px 0 #080808;
Background:linear-gradient (Top, #434345, #2f3032);
}
. pagination A:hover {
Text-decoration:none;
box-shadow:0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
Background:linear-gradient (Top, #f48b03, #c87100);
}
The effect looks like this:
Pagination Navigation effect
This method realizes and the front is different, uses the floating match position localization realization. The following is a simple introduction to the implementation of this method, the detailed reading of Matthew James Taylor wrote the "horizontally centered Menus with no CSS hacks" article.
No floating div: Everyone knows that Div is a block element, and its default width is 100%, as shown in the figure:
Pagination Navigation effect
If the div is set to float, the width of his content will open up the size of the container (in addition to explicitly set the element width value), which is our implementation of the key to the center of the pager:
Pagination Navigation effect
Next, with the traditional method of making, we will float the navigation to the left and each page item will float, as shown in the following illustration:
Pagination Navigation effect
Now the way to do this is to get the center of the pager effect, which is achieved through the "Position:relative" property, first in the list item "UL" On the Right Move 50% (left:50%;), see the following figure:
Pagination Navigation effect
As shown in the figure above, the entire page moves 50% of the distance to the right, and then we also define the "position:relative" attribute on "Li", but the direction in which the move and list "ul" Moves is exactly the opposite direction, and the value of the move is consistent:
Pagination Navigation effect
This enables the float float to be centered.
Special statement: Method Three ideas from Matthew James Taylor wrote the "horizontally centered Menus with no CSS hacks," and cited in the text shown in the diagram.
Advantages: Strong compatibility, strong scalability;
Disadvantages: The principle of implementation is more complex.
Four, absolute positioning to achieve horizontal center
Absolute positioning to achieve horizontal center, I think we are very familiar with, and use a lot of, early is this use:
. ele {
Position:absolute;
Width: breadth value;
left:50%;
Margin-left:-(Width value/2);
}
But this implementation we have a problem, I do not know what the width of the elements, so there is a problem like method one, but we can use the method of three to do a little workaround:
. pagination {
position:relative;
}
. pagination UL {
Position:absolute;
left:50%;
}
. pagination Li {
line-height:25px;
Margin:0 5px;
Float:left;
position:relative;/* note, this can not be absolute, we understand the * *
right:50%;
}
. pagination a {
Display:block;
Color: #f2f2f2;
text-shadow:1px 0 0 #101011;
Padding:0 10px;
border-radius:2px;
box-shadow:0 1px 0 #5a5b5c inset,0 1px 0 #080808;
Background:linear-gradient (Top, #434345, #2f3032);
}
. pagination A:hover {
Text-decoration:none;
box-shadow:0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
Background:linear-gradient (Top, #f48b03, #c87100);
}
The effect looks like this:
Pagination Navigation effect
Advantages: Strong expansibility, strong compatibility;
Disadvantage: Difficult to understand.
Five, CSS3 of the flex to achieve horizontal center method
CSS3 Flex is a very powerful function, she can make our layout become more flexible and convenient, the only thing is that the current browser compatibility is poor. Then the fifth method, we use flex to achieve, in fact, this method early in the "CSS3 to achieve horizontal vertical center," the article is introduced, we have the level of the center of the code to take out:
. pagination {
Display:-webkit-box;
-webkit-box-orient:horizontal;
-webkit-box-pack:center;
Display:-moz-box;
-moz-box-orient:horizontal;
-moz-box-pack:center;
Display:-o-box;
-o-box-orient:horizontal;
-o-box-pack:center;
Display:-ms-box;
-ms-box-orient:horizontal;
-ms-box-pack:center;
Display:box;
Box-orient:horizontal;
Box-pack:center;
}
. pagination Li {
line-height:25px;
Margin:0 5px;
Float:left;
}
. pagination a {
Display:block;
Color: #f2f2f2;
text-shadow:1px 0 0 #101011;
Padding:0 10px;
border-radius:2px;
box-shadow:0 1px 0 #5a5b5c inset,0 1px 0 #080808;
Background:linear-gradient (Top, #434345, #2f3032);
}
. pagination A:hover {
Text-decoration:none;
box-shadow:0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
Background:linear-gradient (Top, #f48b03, #c87100);
}
The effect is as follows:
Pagination Navigation effect
Advantages: Easy to implement, strong scalability
Disadvantage: Poor compatibility.
Horizontal centering method for Fit-content of six and CSS3
Today, see "Horizontal centering using CSS fit-content value", let me Experience the "fit-content" Production horizontal center method. I also put this method in.
"Fit-content" is a new attribute value added to the "width" attribute in CSS, and he works with margin to make it easy for me to achieve horizontal centering:
. pagination UL {
Width:-moz-fit-content;
Width:-webkit-fit-content;
Width:fit-content;
Margin-left:auto;
Margin-right:auto;
}
. pagination Li {
line-height:25px;
Margin:0 5px;
Float:left;
}
. pagination a {
Display:block;
Color: #f2f2f2;
text-shadow:1px 0 0 #101011;
Padding:0 10px;
border-radius:2px;
box-shadow:0 1px 0 #5a5b5c inset,0 1px 0 #080808;
Background:linear-gradient (Top, #434345, #2f3032);
}
. pagination A:hover {
Text-decoration:none;
box-shadow:0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
Background:linear-gradient (Top, #f48b03, #c87100);
}
The effect is as follows:
Pagination Navigation effect
Advantages: Simple to understand, strong scalability;
Disadvantage: Poor browser compatibility
