网易NEC水平垂直居中

原创
01/25 11:57
阅读数 4

HTML5学堂:水平垂直居中在项目开发中可以算是比较常见的吧,所以之前也给大家分享了HTML+CSS水平垂直居中的实现方法。今天主要给大家分享网易NEC里面是如何实现水平垂直居中。

网易NEC是什么?

NEC是网易(杭州)前端CSS开源项目代号,它为您提供漂亮简单的样式解决方案,包括了规范、框架、代码库、插件等内容,致力于为前端开发人员提供高效率高质量的前端页面开发解决方案,提高多人协作效率,也为非专业人员提供快速制作网页的解决方案。

搭建基本的结构

  1. <!doctype html>

  2. <html>

  3. <head>

  4. <meta charset="UTF-8">

  5. <title>HTML5Course - HTML5学堂</title>

  6. <link rel="stylesheet" href="reset.css">

  7. </head>

  8. <body>

  9. <div class="wrap">

  10. <div>

  11. <img src="http://mmbiz.qpic.cn/mmbiz/p6DwiaCENIB6pR8GhsfVeo7382t1SicdA8iahVpBPSRMaFPaHHLXuyXvkryL43R4GuLMOrhVvDFwwfprmH9f9EgVg/0?wx_fmt=jpeg" alt="HTML5学堂" />

  12. <img src="http://mmbiz.qpic.cn/mmbiz/p6DwiaCENIB6pR8GhsfVeo7382t1SicdA8iahVpBPSRMaFPaHHLXuyXvkryL43R4GuLMOrhVvDFwwfprmH9f9EgVg/0?wx_fmt=jpeg" alt="HTML5学堂" />

  13. </div>

  14. </div>

  15. </body>

  16. </html>

欢迎沟通交流~HTML5学堂

实现基本样式

  1. <!doctype html>

  2. <html>

  3. <head>

  4. <meta charset="UTF-8">

  5. <title>HTML5Course - HTML5学堂</title>

  6. <link rel="stylesheet" href="reset.css">

  7. <script type="text/javascript" src="jquery-1.8.3.min.js"></script>

  8. <style>

  9. html,body{

  10. width: 100%;

  11. height: 100%;

  12. }

  13. .wrap{

  14. position:relative;

  15. width: 100%;

  16. height: 100%;

  17. }

  18. .wrap > div {

  19. /*父级设置定位*/

  20. position:absolute;

  21. left:50%;

  22. top:50%;

  23. }

  24. .wrap img {

  25. /*设置图片大小*/

  26. display: block;

  27. width: 200px;

  28. height: 200px;

  29. }

  30. .wrap img:nth-child(1) {

  31. /*第一张图片隐藏*/

  32. visibility:hidden;

  33. }

  34. .wrap img:nth-child(2) {

  35. /*第二张图片定位*/

  36. position:absolute;

  37. left: -50%;

  38. top: -50%;

  39. }

  40. </style>

  41. </head>

  42. <body>

  43. <div class="wrap">

  44. <div>

  45. <img src="http://mmbiz.qpic.cn/mmbiz/p6DwiaCENIB6pR8GhsfVeo7382t1SicdA8iahVpBPSRMaFPaHHLXuyXvkryL43R4GuLMOrhVvDFwwfprmH9f9EgVg/0?wx_fmt=jpeg" alt="HTML5学堂" />

  46. <img src="http://mmbiz.qpic.cn/mmbiz/p6DwiaCENIB6pR8GhsfVeo7382t1SicdA8iahVpBPSRMaFPaHHLXuyXvkryL43R4GuLMOrhVvDFwwfprmH9f9EgVg/0?wx_fmt=jpeg" alt="HTML5学堂" />

  47. </div>

  48. </div>

  49. </body>

  50. </html>

效果分析

它的父级div设置left、top各自为50%,这一步相信大家还是可以理解,就不详细做介绍了。

那么为什么要用两张图片?

大家仔细看看,该方法是没有给父级设置宽高,是靠图片来撑开,所以有一张图片是撑开父级的宽高。

另外一张图片设置left、top为50%,意思就是相对它的父级定位,left、top都是父级宽高的一半(父级的宽高等于图片的宽高)

效果原理分析

这种方法的优势

优点是可以不知道图片的大小,随便放张尺寸上去都能做到居中。另外,兼容性好,如果是不使用nth-child选择器的话,IE6都能兼容的


本文分享自微信公众号 - HTML5 WEB前端分享(h5course-com)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部