Css horizontal center and css horizontal center

Css horizontal center and css horizontal center

Speaking of horizontal center, you may think it is very simple. text-align: center is OK.

However, sometimes you will find that this writing is ineffective. Why? Read down.

Horizontal center: divided into block-level element residences and row-level element centered

 

Line element:

An inline element is an inline element. For example, <span>, <a>, <label>, <em>, and ..

Directly construct a container with the "text-align: center" style. Then, all the row elements in the container are centered.

<Div style = "text-align: center; border-style: solid"> <p style = "border-style: solid"> I am a block-level element, I am not centered </p> <span style = "border-style: solid"> I am a row element, and I want to center </span> </div>

Effect

Have you found that the block-level elements are centered? After adding the <p> width:

<Div 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 a row element, and I want to center </span> </div>

Effect

It turns out that the text is centered!

 

 

The following shows that the block-level element is centered. We all know that block-level elements can be set to height and width.

It can be divided into fixed width and indefinite width.

Width:

Fixed width is actually a good solution. Directly use margin: 0 auto to center the container, and add text-align: center to center the text.

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

Effect

 

Width:

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

However, 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:

<div class="container">    <ul>        <li><a href="#">1</a></li>        <li><a href="#">2</a></li>        <li><a href="#">3</a></li>    </ul></div>

Effect:

. 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, so no texture will be applied. (First, ul sets the left floating to make ul's width not 100%, but the sum of several li widths. Then ul moves ul to the position in the play using left. Because the relative positioning is based on the original position, the entire center is first moved, so that the left side of the element is the center line, as long as left:-50% or right: 50% is centered)

Floating can refer to this article: http://www.th7.cn/web/html-css/201401/17089.shtml