Methods that do not set the width height to center the element

In some specific occasions, without knowing the width of the case but asked the horizontal center, today found some solutions, now turn around to learn

Scenario one, the use of floating inclusion and relative positioning percent data value characteristics, the legend is called "relative floating"

. unknow_width_center1 {position:relative; left:50%; float:left;}
. unknow_width_center1 li {position:relative; right:50%; z-index:2; Float:left}
<</span>ul class= "Unknow_width_center1" >

• <</span>a href= "#" >1<</span>/a></</span>li>
  
  • <</span>a href= "#" >2<</span>/a></</span>li>
    
  • <</span>a href= "#" >3<</span>/a></</span>li>
    
  • <</span>a href= "#" >4<</span>/a></</span>li>
    
  • <</span>a href= "#" >5<</span>/a></</span>li>
    
  • <</span>a href= "#" >6<</span>/a></</span>li>
    </</span>ul>

    The Position property of the parent element is set to relative and left:50% by setting the float float to the parent element, and the child elements are set position:relative and left:-50% to achieve horizontal centering.

    You can preserve block-level elements that are still displayed as Display:block, do not add meaningless labels, and do not add nesting depths. The disadvantage is that position:relative is set up, with some side effects and the need to close (clear) the float.

    Scenario two, using the Text-align attribute property (Text-align:center can be horizontally centered for IE6, 7-block, and inline levels. Other browsers inline level (inline block-level, text) elements can be horizontally centered and block-level invalid. ) is forced to be defined as an inline display:inline

    . unknow_width_center2 {text-align:center; padding:5px;}. unknow_width_center2 li {display:inline;}

    • <</span>a href= "#" >1<</span>/a></</span>li>
    • <</span>a href= "#" >2<</span>/a></</span>li>
    • <</span>a href= "#" >3<</span>/a></</span>li>
    • <</span>a href= "#" >4<</span>/a></</span>li>
    • <</span>a href= "#" >5<</span>/a></</span>li>
    • <</span>a href= "#" >7<</span>/a></</span>li>
    • <</span>a href= "#" >8<</span>/a></</span>li>
    • <</span>a href= "#" >9<</span>/a></</span>li>
    • <</span>a href= "#" >10<</span>/a></</span>li> </</span>ul>

      Set the child element to inline center, then we all know that the Display:inline inline element width is not set, the limitations are too large, not suitable for use.

      Scenario three, using the property properties of table

      . unknow_width_center3{margin:0 Auto}
      . unknow_width_center3 ul {overflow:hidden; *zoom:1}
      . Unknow_width_center3 ul li {float:left;}
      <</span>table class= "Unknow_width_center3" >

      • <</span>a href= "#" >1<</span>/a></</span>li>
      • <</span>a href= "#" >2<</span>/a></</span>li>
      • <</span>a href= "#" >3<</span>/a></</span>li>
      • <</span>a href= "#" >4<</span>/a></</span>li>
      • <</span>a href= "#" >5<</span>/a></</span>li>
      • <</span>a href= "#" >7<</span>/a></</span>li>
      • <</span>a href= "#" >8<</span>/a></</span>li>
      • <</span>a href= "#" >9<</span>/a></</span>li>
      • <</span>a href= "#" >10<</span>/a></</span>li> <</span>/ul></ </span>td> <</span>/tr> </</span>table>

        is implemented by using table as a container. Add meaningless tags. The table tag itself is not a block-level element, and when we do not set the width of the table, the width of his inside is propped up by the width of his inner element. But even if we do not set the width of the table, directly set the table margin margin:0 auto; it can be horizontally centered! This allows us to center the contents indirectly by setting the table horizontally.

        Scenario four, using the Text-align property of the inline block Display:inline-block

        . unknow_width_center4 {Text-align:center}. unknow_width_center4 ul li {display:inline-block;*display:inline; *zoom:1 ;} <</span>ul class= "Unknow_width_center4" ><</span>li><</span>a href= "#" >1< </span>/a></</span>li><</span>li><</span>a href= "#" >2<</span >/a></</span>li><</span>li><</span>a href= "#" >3<</span>/a ></</span>li></</span>ul>

        IE6/7 directly set the center of the display:inline-block is not valid, here IE6/7 under the Display:inline set, the magic is unexpectedly can set the width and height and vertical direction of the inside and outside margins. The disadvantage is that display:inline-block can cause some gaps, and of course there are seemingly unsightly solutions.

Methods that do not set the width height to center the element