实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS控制元素对齐的技巧</title> </head> <style> * { margin: 0; padding: 0; } body { margin-left: 20px; } .box1 { width: 200px; height: 200px; background-color: #f40; text-align: center; } .box1 a { line-height: 200px; color: #fff; } .box2 { width: 200px; height: 200px; background-color: #0f4; text-align: center; display: table-cell; vertical-align: middle; } .box3 { width: 200px; height: 200px; background-color: #f04; display: table-cell; vertical-align: middle; } .box3 .child { width: 100px; height: 100px; background-color: #4f0; margin: 0 auto; } .box4 { width: 200px; height: 200px; background-color: #40f; text-align: center; display: table-cell; vertical-align: bottom; } .box4 a { color: #fff; text-decoration: none; } </style> <body> <div class="box1"> <a href="">我是单行文本</a> </div> <br> <div class="box2"> <a href="">我是多行文本1</a><br> <a href="">我是多行文本2</a><br> <a href="">我是多行文本3</a> </div> <br> <div class="box3"> <div class="child"></div> </div> <br> <div class="box4"> <ul> <il><a href="">1</a></il> <il><a href="">2</a></il> <il><a href="">3</a></il> <il><a href="">4</a></il> <il><a href="">5</a></il> </ul> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄作业