利用CSS的translate属性或利用CSS实现图片居中的效果
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;padding:0;
}
.parent {
float: left;
width: 100%;
height: 200px;
background-color: red;
}
.children {
float:left;
position:relative;
top:50%;
left:50%;
}
.children-inline {
position: relative;
left: -50%;
-webkit-transform : translate3d(0, -50%, 0);
transform : translate3d(0, -50%, 0);
background-color: black;
color:white;
}
</style>
</head>
<body>
<div class="parent">
<div class="children">
<div class="children-inline"><img src="http://nec.netease.com/img/s/2.jpg" alt=""/></div>
</div>
</div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style> *{
padding:0;
margin: 0;
}
.parent {
position:relative;
width:100%;
height:200px;
background:red;
}
.div-in {
position:absolute;
top:50%;
left:50%;
}
.hidden-img {
visibility:hidden;
}
.show-img {
position:absolute;
right:50%;
bottom:50%;
}
</style>
</head>
<body>
<div class="parent">
<div class="div-in">
<img class="hidden-img" src="http://nec.netease.com/img/s/2.jpg" alt="" />
<img class="show-img" src="http://nec.netease.com/img/s/1.jpg" alt="" />
</div>
</div>
</body>
</html>
效果图：
利用CSS的translate属性或利用CSS实现图片居中的效果的更多相关文章
- css标签及属性
css标签及属性 HTML引入CSS的方法 1.嵌入式 <style type = “text/css”>要写的样式</style> 2.外联式 <link rel ...
- CSS常用样式属性
1.CSS字体和文本相关属性 属性 font-family 规定文本的字体系列,比如:“serif” ''sans-serif" font-size 规定文本的字体尺寸 font-style ...
- 利用CSS的@font-face属性 在网页中嵌入字体
字体使用是网页设计中不可或缺的一部分.网页是文字的载体,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计. 美工设计师最常做的办 ...
- 利用IIS部署WEB网站以及解决CSS/JS不能显示问题
利用IIS部署WEB网站以及解决CSS/JS不能显示问题 转载声明:http://blog.sina.com.cn/s/blog_a001e5980101b4kt.html vs中正常IIS发布网站后 ...
- 利用wget 抓取 网站网页 包括css背景图片
利用wget 抓取 网站网页 包括css背景图片 wget是一款非常优秀的http/ftp下载工具,它功能强大,而且几乎所有的unix系统上都有.不过用它来dump比较现代的网站会有一个问题:不支持c ...
- jQuery结合CSS实现手风琴组件(2)----利用seajs实现静态资源模块化引入
1. 目录结构(webStrom) 2. 代码 1.html <!DOCTYPE html> <html lang="en"> <head> & ...
- 利用css3的text-shadow属性实现文字阴影乳白效果
现在CSS3+html5的网页应用的越来越广泛了.很多网页中的字体同样可以用CSS3来实现炫酷的效果. 下面就介绍一下利用css3的text-shadow属性实现文字阴影乳白效果.这是在设计达人上面看 ...
- CSS Counters 计数属性
CSS Counters其实就是一计数器,早期在CSS中计数器仅存在于ul和ol元素.如果要使用在div这样的元素上,只能通过list-style-image或者是元素的backgroud-image ...
- 重温CSS：Border属性
边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...
随机推荐
- html audio标签 语法
html audio标签 语法 audio标签的作用是什么? 作用:<audio> 标签定义声音,比如音乐和视频或其他音频资源,使用audio标签可以不用Flash插件就可以听音乐看视频, ...
- Luogu P2678 跳石头
题目链接:Click here Solution: 最小值最大,显然二分,二分出mid后贪心去除石头,判断m次内是否可行即可 Code: #include<bits/stdc++.h> # ...
- 序列式容器————array
目录 介绍 1 构造函数 2 fill() 3 元素的获取 4 size() 5 empty() 6 front() 7 back() 8 get<n> 9 迭代器(待补充) 10 元素的 ...
- pyinstaller打包的exe太大？你需要嵌入式python玄学
pyinstaller打包一个exe动辄几十M几百M (特别是import pandas以后) 知乎上居然没有人po这方面的”知识“(手动狗头) 查了很多关于reduce pyinstaller打包出 ...
- 五大 JAVA Web 框架的优缺点对比，Spring MVC 领先
毫无疑问,Java 是当今世界上最重要的编程语言之一.js 框架给程序员提供了 一个可以构建程序的坚实基础.它包括定义的类和功能,用于硬件设备管理,与系统软件交互并处理输入,让开发人员变得更轻松.Ja ...
- @清晰掉 sprintf sscanf双胞胎
sprintf() 格式化输出函数(图形) 功能: 函数sprintf()用来作格式化的输出.用法: 此函数调用方式为int sprintf(char *string,char *format,arg ...
- phpmyadmin普通用户使用配置
正常情况需求是,普通用户可以管理特定的数据库,可能也需要能新建数据库,配置如下: 1.添加用户,phpmyadmin和应用访问,所以主机设置127.0.0.1访问即可 2.如果只管理一个数据,可以选择 ...
- 数据结构和算法（Java版）快速学习（交换、选择、插入排序）
基本排序算法:交换.选择.插入排序 常用的交换排序又称之为:冒泡排序 一般河水中的冒泡,水底刚冒出来的时候是比较小的,随着慢慢向水面浮起会逐渐增大,冒泡排序由此物理规律得来. 冒泡算法的运作规律如下: ...
- 阶段3 1.Mybatis_02.Mybatis入门案例_3.mybatis注解开发和编写dao实现类的方式
注解的用法 直接创建一个新的项目 下一步直接next 然后finish即可 把之前项目01里面的代码直接复制过来 复制到我们02的注解的工程中 把01项目导入的依赖也都粘贴过来 再把测试类复制过去 复 ...
- linux系统查找大文件脚本
每次遇到服务器磁盘满,都会很苦恼,但有了下面两种方法就可以轻松找到机器中的大文件了, 第一种:du -sh du -sh 当前目录下个文件或目录的大小: du -sh * 显示前10个占用空间最大的文 ...