专栏首页HTML5学堂网易NEC水平垂直居中

网易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),作者:HTML5学堂

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 如何清除浮动

    如何清除浮动 大家都知道,浮动会对文档产生影响,具体来看看会对文档产生什么影响? 清除浮动后的效果: ? 未清除浮动后的效果: ? 实例代码(未清除浮动): ...

    HTML5学堂
  • JQuery选择器(中)

    HTML5学堂:在学习JQuery开发的时候,选择器有多种,而我们将接着介绍选择器的其他类型,希望对大家有帮助! 5.临近选择器: $("mix+mix"),选...

    HTML5学堂
  • CSS3动画,为你带来极致的视觉体验!

    HTML5学堂:随着网络的发展,浏览器具有更强的渲染与高级代码的执行能力。所以在当前,大量的动画效果由原来的JavaScript制作正慢慢的被CSS3所替代,究...

    HTML5学堂
  • CSS3动画,为你带来极致的视觉体验!

    HTML5学堂:随着网络的发展,浏览器具有更强的渲染与高级代码的执行能力。所以在当前,大量的动画效果由原来的JavaScript制作正慢慢的被CSS3所替代,究...

    HTML5学堂
  • 【iOS开发】如何将 Array 存储在本地

    做开发的时候,我们经常需要将数据保存在plist文件中,用这种方式来将数据写入磁盘,这样退出 App 再打开的话,上次写入的文件还在。

    KyXu
  • 5条面经,助你成功拿到UX设计师Offer

    如果你经常逛推酷, 知乎, 设计达人或者一些专业的设计师论坛,博客,你会发现,第一批成为UX设计师的人,其实是误打误撞地落入这个行业的。那时候人们并不清楚UX...

    奔跑的小鹿
  • mac 搭建selenium与ChromeDriver环境安装 selenium安装 ChromeDriver验证安装

    下载后,将安装包加入到环境变量。以mac系统为例,将chromedriver移至/usr/bin目录下即可

    章鱼喵
  • AIDL专栏|基于HTM/RDMA的可扩展内存事务处理系统

    “人工智能前沿讲习班”(AIDL)由中国人工智能学会主办,旨在短时间内集中学习某一领域的基础理论、最新进展和落地方向,并促进产、学、研相关从业人员的相互交流,对...

    马上科普尚尚
  • 网页设计师必备的10项技能,你会几项?

    快速发展的技术、千变万化的趋势、应接不暇的软件和素材,都是网页设计师需要面临的挑战。但是撇开这些一直变化的东西,有一些基本的技能或者说能力,是设计师必须熟练掌握...

    用户1730674
  • 第五讲 通过植物大战僵尸案例来谈谈CSS布局和定位

    相对定位就是移动一个标签,根据什么来移动呢?对了,就是根据它原来的位置移动,就这么简单。比如,我现在要移动这块场地,就这样做:

    剽悍一小兔

扫码关注云+社区

领取腾讯云代金券