Maison > Article > interface Web > 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!