Techniques CSS pour contrôler l'alignement des éléments

L'élément parent doit être un élément bloc, qui est divisé dans les types suivants en fonction des éléments enfants :

1. L'élément enfant est un élément en ligne : tel que : a, span

a. Centré horizontalement : défini sur l'élément parent : text-align:center;

b. Centrage vertical : définit la hauteur de la ligne sur l'élément enfant en ligne pour qu'elle soit la même que celle de l'élément parent : 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. L'élément enfant est un texte en ligne multiligne

centré horizontalement : l'élément parent définit text-align:center

b. . Centrage vertical : l'élément parent définit : 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 L'élément enfant est un élément bloc :

a. l'élément enfant définit automatiquement la gauche et la droite : margin: auto;

Centré verticalement : compatible avec le traitement du texte en ligne multiligne : 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. Les éléments enfants sont des éléments de bloc à largeur variable : la navigation de page la plus courante

a. Centrage horizontal : les éléments enfants sont convertis en éléments en ligne et les éléments parents ajoutent : du texte. align:center

b. Centrage vertical : line-height=parent.height

c. texte en ligne multiligne, vertical-align:bottom;

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!