Correction status:Uncorrected
Teacher's comments:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html" /> <meta charset="utf-8" /> <title>垂直对齐的几种方式</title> </head> <body> <style> /*1.子元素是行内元素如a,span,p 设置水平居中:text-align:center; 设置垂直居中:与父元素等高:line-height:父元素高度*/ .box1{ width: 200px; height:200px; background-color: lightpink; text-align: center; line-height: 200px; } /*2.子元素是行内元素且多行,设置水平居中:text-align:center;设置垂直居中:先变成单元格,再居中 */ .box2{ width: 400px; height:200px; background-color: lightgrey; text-align: center; display: table-cell; vertical-align: middle; } /*3.子元素是块级元素,设置水平居中:margin: auto ;设置垂直居中:先变成单元格,再居中 */ .box3{ width: 200px; height:200px; background-color: green; display: table-cell; vertical-align: middle; } .box4{ width: 100px; height:100px; background-color: pink; margin: auto ;/*水平居中*/ } /*4.子元素是不定宽块级元素,设置水平居中:text-align:center ;设置垂直居中:先变成单元格,再居中 或者直接 line-height:父元素高度*/ .box3{ width: 200px; height:200px; background-color: green; display: table-cell; vertical-align: middle; } .box4{ width: 100px; height:100px; background-color: pink; margin: auto ;/*水平居中*/ } .box5{ width: 200px; height:200px; background-color: grey; text-align: center; /*line-height: 200px;可以 */ display: table-cell; /* vertical-align: middle; 可以 */ vertical-align: bottom; /*居底 */ } .box5>ul{ margin: 0; padding-left: 0; margin-bottom: 10px; } ul li { display: inline; } </style> <div class="box1"> <a href="http://www.baidu.com">百度</a> </div> <div class="box2"> <span>php学习去哪里?</span><br /> <a href="http://www.php.cn"> http://www.php.cn </a> </div> <div class="box3"> <div class="box4"></div> </div> <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>
点击 "运行实例" 按钮查看在线实例
感悟:根据子元素的不同类型,简单应用实例证实其与当前父元素之间,如何实现垂直对齐的几种方法,可供参考!