CSS Control element Alignment tips

The parent element must be a block element, which is divided into the following types according to the child elements:

1. Child elements are inline elements: for example: A,span

A. Center horizontally: Set on parent element: Text-align:center;

B. Center vertically: Sets the row height on the subelements of the line to the same parent element: Line-height

. box1 {width:200px;height:200px;background-color: #FFFF0A; text-align:center;  /* Allows inner inline elements to be centered horizontally */}.box1 a {line-height:200px;  /* child element set row height same as parent element */}<div class= "Box1" >     <a href= "" >topic.alibabacloud.com</a></div>

2. Child elements are multi-line inline text

A. Center horizontally: Parent Element Settings Text-align:center

B. Center vertically: Parent element setting: Display:table-cell;vertical-align:middle

. box2 {width:200px;height:200px;background-color: #FC0107; text-align:center;  /* Allows inner multiline inline elements to be centered horizontally *//* the following two declarations allow multiline text to be centered vertically */display:table-cell;  /* Set to display as table cell */vertical-align:middle; /* Set the element in this cell vertically centered */}<div class= "Box2" ><span>php Chinese web </span><br><span>www.php.cn</ Span></div>

3. Child elements are block elements:

A. Horizontal centering: Child elements set left and right: Margin:auto;

B. Vertical centering: Consistent with multi-line inline text processing: Display:table-cell;vertical-align:middle

. box3 {width:200px;height:200px;background-color: #66CCFF;/* The following two declarations enable block-level child elements to be centered vertically */display:table-cell;  /* Set to display as table cell */vertical-align:middle; /* Set the element in the cell vertically centered */}.box3. Child {width:100px;height:100px;background-color: #F4FF0A; margin:auto;  /* Horizontal Center */}<div class= "Box3" ><div class= "Child" ></div></div>

4. Child elements are variable-width block elements: the most common pager

A. Horizontal centering: child element change within element, parent element plus: Text-align:center

B. Vertical center: Can be added to the UL line of the page high Line-height=parent.height

C. Center bottom: More commonly used, with multi-line inline text vertical processing method, Vertical-align:bottom;

. box4 {width:200px;height:200px;background-color: #FD6FCF; text-align:center;  /* Enables inline elements to be centered horizontally *//* the following two declarations allow the block-level child elements to be centered vertically */display:table-cell;  /* Set to display as table cell */vertical-align:bottom; /* Set the element inside the cell to center the bottom edge */}.box4 ul {margin:0;padding:0;/*line-height:200px;*/}.box4 li {list-style:none;display:inline;} <div class= "box4" ><ul><li><a href= "" >1</a></li><li><a href= "" >2 </a></li><li><a href= "" >3</a></li><li><a href= "" >4</a>< /li><li><a href= "" >5</a></li></ul></div>