Home > Article > Web Front-end > CSS techniques for controlling element alignment
The parent element must be a block element, which is divided into the following types according to the child elements:
1. The child element is an inline element: such as: a, span
a. Horizontally centered: Set on the parent element: text-align:center;
b. Vertical centering: Set the line height on the inline child element to be the same as the parent element: line-height
.box1 { width: 200px; height: 200px; background-color: #FFFF0A; text-align: center; /*可以使内部行内元素水平居中*/ } .box1 a { line-height: 200px; /*子元素设置行高与父元素高度相同*/ } <div class="box1"> <a href="">PHP中文网</a> </div>
2. Child element It is multi-line inline text
a. Horizontal centering: parent element setting text-align:center
b. Vertical centering: parent element setting: display:table-cell;vertical-align:middle
.box2 { width: 200px; height: 200px; background-color: #FC0107; text-align: center; /*可以使内部多行行内元素水平居中*/ /*以下二个声明可以使多行文本垂直居中*/ display: table-cell; /*设置显示方式为表格单元格*/ vertical-align: middle; /*设置该单元格内的元素垂直居中*/ } <div class="box2"> <span>php中文网</span><br> <span>www.php.cn</span> </div>
3. The child element is a block element:
a. Horizontal centering: the child element sets the left and right automatically: margin: auto;
b. Vertical centering: within multiple lines The joint text processing method is the same: display:table-cell;vertical-align:middle
.box3 { width: 200px; height: 200px; background-color: #66CCFF; /*以下二个声明可以使块级子元素垂直居中*/ display: table-cell; /*设置显示方式为表格单元格*/ vertical-align: middle; /*设置该单元格内的元素垂直居中*/ } .box3 .child { width: 100px; height: 100px; background-color: #F4FF0A; margin: auto; /*水平居中*/ } <div class="box3"> <div class="child"></div> </div>
4. The child element is a block element with variable width: the most common paging navigation
a. Horizontal centering :The child element is converted to an in-line element, and the parent element is added: text-align:center
b. Vertical centering: line height can be added to the paginated ul line-height=parent.height
c. Bottom center: more commonly used, consistent with the vertical processing method of multi-line inline text, vertical-align:bottom;
.box4 { width: 200px; height: 200px; background-color: #FD6FCF; text-align: center; /*可以使行内元素水平居中*/ /*以下二个声明可以使块级子元素垂直居中*/ display: table-cell; /*设置显示方式为表格单元格*/ vertical-align:bottom; /*设置该单元格内的元素底边居中*/ } .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>
The above is the detailed content of CSS techniques for controlling element alignment. For more information, please follow other related articles on the PHP Chinese website!