Home  >  Article  >  Web Front-end  >  CSS techniques for controlling element alignment

CSS techniques for controlling element alignment

无忌哥哥
无忌哥哥Original
2018-06-28 17:29:362262browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article:CSS table setting exampleNext article:CSS table setting example