Correction status:Uncorrected
Teacher's comments:
实例 1、 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>元素对齐</title> </head> <body> <h3>元素对齐方式</h3> 1.子元素是行内元素:如a,span <br> <style> .box1 { width: 200px; height:200px; background-color: green; text-align: center; } .box1 a{ line-height: 200px; } </style> <div class="box1"> <a hret="">php中文网</a> </div> 2.子元素是多行的内联本文 <style> .box2 { width: 200px; height:200px; background-color: red; text-align: center; display: table-cell; vertical-align: middle; } </style> <div class=" text-align: center; box2"> <span>php中文网</span> <br> <span>www.php.cn</span> </div> 3.子元素是块元素 <style> .box3 { width: 200px; height:200px; background-color: red; display:table-cell ; vertical-align: middle; } .box3 .child { width: 100px; height:100px; background-color: lightgreen; margin:auto ; } </style> <div class="box3"> <div class="child"></div> </div> 4.子元素是不定宽的块元素 <style> .box4 { width: 200px; height:200px; background-color: pink; display:table-cell ; text-align: center ; vertical-align: bottom; } .box4 li { display:inline ; } </style> <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> </body> </html> 2、 <!<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>决对定位</title> </head> <body> <style> body{ margin: 0; } .box { width: 600px; height:600px; /*background-color: wheat;*/ /*position: absolute;*/ } .box1 { width: 200px; height:200px; background-color: green; position: absolute; top:0; left:200px; } .box2{ width: 200px; height:200px; background-color: pink; position: absolute; top:200px; left:0; } .box3 { width: 200px; height:200px; background-color: darkred; position: absolute; top:200px; left:400px; } .box4 { width: 200px; height:200px; background-color: blue; position: absolute; top:400px; left:200px; } </style> <div class="box"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> </div> </body> </html> 运行实例 » 点击 "运行实例" 按钮查看在线实例