Recommended CSS Horizontal centering various methods of summary

The following small series for everyone to bring a recommended CSS horizontally centered various methods of summary. Small series feel very good, now share to everyone, also for everyone to make a reference. Let's take a look at it with a little knitting.

However, it is sometimes found that this writing is not effective. What is the reason? Please look down.

Center horizontally: center of block-level elements and center of row elements

Inline elements:

Inline elements are inline elements. such as <span>, <a>, <label>, <em>, , etc...

Build a container with a "text-align:center" style directly, and the inline elements inside will be centered.

<p style= "Text-align:center;border-style:solid" >        <p style= "Border-style:solid" > I'm a block-level element, I'm not centered </p >        <span style= "Border-style:solid" > I am the inline element, I want to center </span>    </p>

Effect

Have you found the wrong, block-level elements how "look" is also centered? After adding width to <p>:

<p style= "Text-align:center;border-style:solid" >        <p style= "border-style:solid;width:500px" > I am a block-level element, I am not centered </p>        <span style= "Border-style:solid" > I am the inline element, I want to center </span>    </p>

Effect

Originally only the text inside the center!

Then the block-level element is centered below. We all know that block-level elements can be set height and width, then it is

It is divided into fixed width and indefinite width.

Fixed width:

Fixed width is actually very good solution. Directly margin:0 Auto can be implemented in the center of the container, plus text-align:center can be used to center text.

    <p style= "border-style:solid;text-align:center;margin:0 auto;width:500px" > I am a fixed-width block-level element, I want to center </p>

Effect

Variable width:

The indefinite width is actually the most used, such as this navigation bar:

Because the content in the navigation bar will change, the width cannot be fixed. There are three ways to center, one of which is to use the properties of the table label, which is not very good.

1, directly to the element into the line element, both Display:inline, and then you can use Text-align:center. But the width and height cannot be set.

Css:

. container{       text-align:center;   }   . Container ul{       list-style:none;       padding:0;       display:inline;   }   . Container li{       margin-right:8px;       Border-style:solid;       Display:inline;   }

Body

<p class= "Container" >    <ul>        <li><a href= "#" >1</a></li>        <li ><a href= "#" >2</a></li>        <li><a href= "#" >3</a></li>    </ Ul></p>

The effect:

2, the following uses the parent element floating and relative positioning as well as lelf:50%. Child elements are still set but left:-50%.

Corrected CSS code:

. container ul{       list-style:none;       Float:left;       position:relative;left:50%;       padding:0;   }   . Container li{       margin-right:8px;       Float:left;       position:relative;left:-50%;   }

The effect is the same, it does not map . (First, the UL set left float is to make the UL width is not 100%, but a few Li width sum.) After the UL relative positioning use left to move the UL to the play position. Because the relative positioning is the original position of the original point, so the overall movement of the middle, this way the left side of the element is the centerline, so long as the left:-50% or right:50% is centered)

The above CSS Horizontal center of the various methods summary (recommended) is a small part of the whole content to share to everyone, I hope to give you a reference, but also hope that we support a lot of topic.alibabacloud.com.