实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>元素对齐</title> <style type="text/css"> .box1 { width: 200px; height: 200px; background-color: lightblue; text-align: center; /*使行内元素在块元素中水平居中*/ margin: auto; /*浏览器自动计算box1的位置,使其左右自动居中*/ } .box1 span { line-height: 200px; /*设置行内元素与父元素等高*/ } .box2 { width: 200px; height: 200px; background-color: skyblue; text-align: center; /*使行内元素在块元素中水平居中*/ /*多个行内元素在块元素中垂直居中 */ display: table-cell; /*将当前块显示方式改为表格单元格方式*/ vertical-align: middle; /*设置单元格内元素垂直居中*/ } .box4 { width: 400px; height: 400px; background-color: orange; display: table-cell; /*将当前块显示方式改为表格单元格方式*/ vertical-align: middle; /*设置单元格内元素垂直居中*/ } .box5 { width: 200px; height: 200px; background-color: orange; text-align: center; /*使单元格内元素在块元素中水平居中*/ display: table-cell; /*将当前块显示方式改为表格单元格方式*/ vertical-align: bottom; /*设置单元格内元素底边居中*/ } .box5 ul { padding-left: 0; } .box5 li { list-style: none; display: inline; } </style> </head> <body> <div class="box4"> <div class="box1"> <span>单行文本居中</span> </div> </div> <hr> <div class="box2"> <span>多行文本1</span><br> <span>多行文本2</span> </div> <hr> <div class="box5"> <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> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例