网易NEC水平垂直居中

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

网易NEC是什么?

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

搭建基本的结构

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5Course - HTML5学堂</title>
<link rel="stylesheet" href="reset.css">
</head>
<body>
<div class="wrap">
<div>
<img src="http://mmbiz.qpic.cn/mmbiz/p6DwiaCENIB6pR8GhsfVeo7382t1SicdA8iahVpBPSRMaFPaHHLXuyXvkryL43R4GuLMOrhVvDFwwfprmH9f9EgVg/0?wx_fmt=jpeg" alt="HTML5学堂" />
<img src="http://mmbiz.qpic.cn/mmbiz/p6DwiaCENIB6pR8GhsfVeo7382t1SicdA8iahVpBPSRMaFPaHHLXuyXvkryL43R4GuLMOrhVvDFwwfprmH9f9EgVg/0?wx_fmt=jpeg" alt="HTML5学堂" />
</div>  
</div>
</body>
</html>

实现基本样式

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5Course - HTML5学堂</title>
<link rel="stylesheet" href="reset.css">
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<style>
html,body{
width: 100%;
height: 100%;
}
.wrap{
position:relative;
width: 100%;
height: 100%;
}
.wrap > div {
/*父级设置定位*/
position:absolute;
left:50%;
top:50%;
}
.wrap img {
/*设置图片大小*/
display: block;
width: 200px;
height: 200px;
}
.wrap img:nth-child(1) {
/*第一张图片隐藏*/
visibility:hidden;
}
.wrap img:nth-child(2) {
/*第二张图片定位*/
position:absolute;
left: -50%;
top: -50%;
}
</style>
</head>
<body>
<div class="wrap">
<div>
<img src="http://mmbiz.qpic.cn/mmbiz/p6DwiaCENIB6pR8GhsfVeo7382t1SicdA8iahVpBPSRMaFPaHHLXuyXvkryL43R4GuLMOrhVvDFwwfprmH9f9EgVg/0?wx_fmt=jpeg" alt="HTML5学堂" />
<img src="http://mmbiz.qpic.cn/mmbiz/p6DwiaCENIB6pR8GhsfVeo7382t1SicdA8iahVpBPSRMaFPaHHLXuyXvkryL43R4GuLMOrhVvDFwwfprmH9f9EgVg/0?wx_fmt=jpeg" alt="HTML5学堂" />
</div>  
</div>
</body>
</html>

效果分析

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

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

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

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

效果原理分析

这种方法的优势

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

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-12-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大数据钻研

前端工程师如何干掉设计

前端是一个承上启下的职位,正因为其位置的特殊性导致其必须了解设计和后台的一些基本知识。本文并非教大家如何取代设计的工作,而是讲解前端如何更快更便捷的实现一些简单...

2914
来自专栏葡萄城控件技术团队

响应式设计(Response Web Design)实践

前一篇响应式设计(Response Web Design)浅谈提到了响应式设计的由来和应用场景。本文聊一聊如何实现。 如何让自己的网站也响应式Web设计,可以响...

1937
来自专栏腾讯社交用户体验设计

设计师的春天:中文WebFont解决方案Font-Spider(字蛛) - 腾讯ISUX

1223
来自专栏理论坞

统一原则 在网页设计当中的运用

形式美法则是人类在创造美的形式和过程中对美的形式规律的总结概括,世间万物的美都可以用形式美法则来概括。在平面构成中也有形式美法则:统一和变化,对称和平衡,节奏和...

582
来自专栏小狼的世界

RSS的相关知识

rss是RDF Site Summary 的缩写(RDF是Resource Description Framework的缩写 ),是指将网站摘要用xml语言描述...

903
来自专栏数据小魔方

案例|产品介绍(喜力啤酒价格构成图)

今天要跟大家分享的是产品介绍的一般思路! 产品介绍可能是我们日常做演示文稿需求最频繁的任务之一。 它见诸于课堂演示、新品发布会、业绩报告会以及融资路演的大屏幕...

3375
来自专栏菜鸟前端工程师

html+css学习笔记013-阿里图标0iframe

752
来自专栏IMWeb前端团队

精选的10个前端开发工具...| 慕课网

网页前端开发人员必须关注当下流行的工具,今天为了帮助前端开发者们找到好的高效的开发工具,我们转载分享了这些工具。例如:生成工具、JS库、框架和其他好...

2285
来自专栏james大数据架构

创建支持多种屏幕尺寸的Android应用

Android涉及各种各样的支持不同屏幕尺寸和密度的设备。对于应用程序,Android系统通过设备和句柄提供了统一的开发环境,大部分工作是校正每一个应用程序的用...

1816
来自专栏前端说吧

mask遮罩层的华丽写法

982

扫描关注云+社区