网易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 条评论
登录 后参与评论

相关文章

来自专栏积累沉淀

Hive2.0.0操作HBase 1.2.1报错解决

首先看错  org.apache.hive.service.cli.HiveSQLException: Failed to open new session: ...

2339
来自专栏跟着阿笨一起玩NET

C# 通过HttpWebRequest在后台对WebService进行调用

http://www.cnblogs.com/macroxu-1982/archive/2009/12/23/1630415.html

2772
来自专栏xingoo, 一个梦想做发明家的程序员

windows程序设计-第四章 system1.c

/*---------------------------------------------------- SYSMETS1.C -- System M...

23610
来自专栏互联网开发者交流社区

WinForm之窗体应用程序

1853
来自专栏跟着阿笨一起玩NET

[C#]工具类—FTP上传下载

  不错的文章:http://www.cnblogs.com/greatverve/archive/2012/03/03/csharp-ftp.html

1171
来自专栏C# 编程

C#使用DataSet类、DataTable类、DataRow类、OleDbConnection类、OleDbDataAdapter类编写简单数据库应用

//注意:请使用VS2010打开以下的源代码。 //源代码地址:http://pan.baidu.com/s/1j9WVR using System; usi...

2460
来自专栏谈补锅

记录C#常用的代码片段

using Newtonsoft.Json; using Newtonsoft.Json.Linq;

922
来自专栏码匠的流水账

聊聊spring cloud的AbstractLoadBalancingClient

本文主要研究一下spring cloud的AbstractLoadBalancingClient

832
来自专栏码匠的流水账

聊聊EurekaRibbonClientConfiguration

spring-cloud-netflix-eureka-client-2.0.0.RELEASE-sources.jar!/org/springframewor...

1171
来自专栏闻道于事

商城项目整理(三)JDBC增删改查

商品表的增加,修改,删除,订单表的增加,确认,用户表的查看,日志表的增加,查看 商品表建表语句: 1 create table TEST.GOODS_TABL...

5455

扫码关注云+社区