Centering CSS inline elements and block-level elements

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.