Centering CSS inline elements and block-level elements

One. Center horizontally

In-line elements and block-level elements are different, for inline elements, simply set the text-align=center in the parent element;

There are several centering methods for block-level elements:

1. Place the element in the table, and then set the table's Margin-left and margin-right to auto, centering the table so that the block-level element leaf is centered in it, but this method does not conform to the specification of the semantic label;

2. Convert block-level elements into inline elements (by setting display:inline) and then center. This way the center element becomes an inline element and cannot be set to the width height;

3. Set the parent element float:left,position:relative,left:50%; the child element float:left,position:relative,left:-50%, which is centered by the relative layout. The above three ways have advantages and disadvantages, Depending on the usage scenario, choose.

Two. Center vertically

1. For elements that know the height can be set up and down padding equal;

2. Set Line-height and Height equal

3. Use Vertical-align, but this attribute is only applicable in tr,td, so the element can be placed into the table in the center

Source

1  1<!--horizontally centered--2  2<!--inner Element center simply set text-align in the parent element--3  3<divclass="Father">4  4<pclass="Blockcenter">5  5Hehe</p>6  6</div>7  7<!--Table Center--8  8<tableclass="Tableclass">9  9<tr>Ten Ten<td> One  One<ulclass="Ulclass"> A  A<li><a href="#"> Ah </a></li> -  -</ul> -  -</td> the  the</tr> -  -</table> -  -<tableclass="Tableclass"> -  -<tr> +  +<td> -  -<ulclass="Ulclass"> +  +<li><a href="#"> Ah </a></li> A  A<li><a href="#"> Ah </a></li> at  at<li><a href="#"> Ah </a></li> -  -</ul> -  -</td> -  -</tr> -  -</table> -  -<tableclass="Tableclass"> in  in<tr> -  -<td> to  to<ulclass="Ulclass"> +  +<li><a href="#"> Ah </a></li> -  -<li><a href="#"> Ah </a></li> the  the<li><a href="#"> Ah </a></li> *  *<li><a href="#"> Ah </a></li> $  $<li><a href="#"> Ah </a></li>Panax Notoginseng Panax Notoginseng</ul> -  -</td> the  the</tr> +  +</table> A  A<!--to change the block element to a line element centered-- the  the<ul style="{Text-align:center}"> +  +<li style="{Display:inline}">nihao </li> -  -</ul> $  $<!--use phase-to- $  $<ulclass="Relativecenterfather"> -  -<liclass="Relativecenterchild"> Hello </li> -  -</ul> the  the      -  -<!--erector Spinae Straight Center--Wuyi Wuyi<!--1. Set the same up and down padding-- the  the<!--2The parent element height and line-height are the same-- -  - Wu  Wu<div style={background:# the; Width:500px;color: #fff;line-height:100px;text-align:center}> -  -I'm going to go on a trip. About  About</div> $  $<!--3. Vartical-align, this one only works for TR,TD. -  -<table> -  -<tr verticla-align="Center"height=" -"Background="#FF00FF"> -  -<td> A string of the year </td> A  A</tr> +  +</table>

View Code

CSS Styles

1 <style type= "Text/css" >2 . Father3{4 width:500px;5}6 . Inlinecenter7{8 text-align:Center;9 float: Left;Ten} One . Blockcenter A{ - width:100px; - Margin-left:Auto; the Margin-right:Auto; - text-align:"Center" -} - . Tableclass +{ - Margin-left:Auto; + Margin-right:Auto; A} at . Ulclass -{ - List-style:None; - margin:0; - padding:0; -} in . Ulclass Li -{ to float: Left; + Display:inline; - text-align:Center; the} * . Ulclass Li a ${Panax Notoginseng text-align:Center; - float: Left; the background:#316AC5; + Color:#fff; A} the . Ulclass Li A:hover +{ - background:#fff; $ Color:#316AC5; $} -      -      the . Relativecenterfather -{Wuyi float: Left; the position:relative; -  Left:50% Wu} - . Relativecenterchild About{ $ float: Left; - position:relative; -  Left:-50%; -} A      +      the     /*erector spinae Straight Center*/ - . Wrap ${ the background:#000; the width:500px; the Color:#fff; the Height:100px; - Line-height:100px; in} the </style>

Centering CSS inline elements and block-level elements