帮忙看一下是否正确,谢谢!
来源:3-12 编程练习
慕九州4495990
2019-05-17 22:29:09
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vertical-align</title> <style type="text/css"> *{padding:0px;margin: 0px;} .warp1{ height:80px; width: 100%; background-color: #14191e; /*在此补充代码*/ } .warp1 h1{ color:#fff; text-align:center; font-size:24px; line-height:80px; /*在此补充代码*/ } .warp2{ height:400px; width: 100%; border:1px #14191e solid; /*在此补充代码*/ text-align: center; display: table; } .content{ /*在此补充代码*/ display: table-cell; vertical-align: middle; } .content p{ width:500px; font-family: "微软雅黑"; margin:0 auto; line-height: 1.5em; font-size: 14px; text-align: left; /*在此补充代码*/} </style> </head> <body> <div class="warp1"> <h1>欢迎来到慕课网</h1> </div> <div class="warp2"> <div class="content"> <p>慕课网,只学有用的!</p> <p>慕课网(IMOOC)是IT技能学习平台。慕课网(IMOOC)提供了丰富的移动端开发、php开发、web前端、android开发以及html5等视频教程资源公开课。并且富有交互性及趣味性,你还可以和朋友一起编程。</p> </div> </div> </body> </html>
1回答
樱桃小胖子
2019-05-18
效果实现的是可以的,但是会出现横向滚动条,建议参考:
希望可以帮到你!
相似问题