利用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一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...
随机推荐
- Python 爬虫十六式 - 第七式：正则的艺术
RE:用匹配来演绎编程的艺术 学习一时爽,一直学习一直爽 Hello,大家好,我是 Connor,一个从无到有的技术小白.上一次我们说到了 pyquery 今天我们将迎来我们数据匹配部分的最后一位 ...
- BZOJ 4883: [Lydsy1705月赛]棋盘上的守卫 最小生成树 + 建模
Description 在一个n*m的棋盘上要放置若干个守卫.对于n行来说,每行必须恰好放置一个横向守卫:同理对于m列来说,每列 必须恰好放置一个纵向守卫.每个位置放置守卫的代价是不一样的,且每个位置 ...
- 技术干货：Python解析CSV
1. 什么是CSV CSV(Commma-Separated Value)是都好分隔符,其文件以纯文本形式存储表格数据(数字和文本). 案例: 2. 为什么要使用CSV 与专有的二进制文件格式截然不同 ...
- Spring Boot教程（十九）RESTful API单元测试
下面针对该Controller编写测试用例验证正确性,具体如下.当然也可以通过浏览器插件等进行请求提交验证. @RunWith(SpringJUnit4ClassRunner.class) @Spri ...
- SQL Server Availability Group Failover 测试
兼容性测试: 测试脚本: 环境:windows failover cluster 主库执行脚本: USE [master]GOALTER AVAILABILITY GROUP [test_AG]MOD ...
- Python深度学习读书笔记-5.Keras 简介
Keras 重要特性 相同的代码可以在 CPU 或 GPU 上无缝切换运行. 具有用户友好的 API,便于快速开发深度学习模型的原型. 内置支持卷积网络(用于计算机视觉).循环网络(用于序列处理)以及 ...
- iOS11最新隐私信息访问列表
今天早上应用出现拍照上传闪退的紧急bug,才发现在iOS11中,隐私权限配置又发生了改变,将原来的相册访问权限分开了,现在有读写两种权限. iOS11访问权限列表 隐私数据 对应key值 提示语 相册 ...
- pip安装报错：Fatal error in launcher: Unable to create process using '"'
pip安装包报错 解决方案: pip需要升级,可使用以下脚本: python -m pip install -U pip
- ES6字符串的拓展
字符串的遍历接口 for...of循环遍历. for (let codePoint of 'foo') { console.log(codePoint) } // "f" // & ...
- Stream介绍
一.Stream介绍 现在有这样的需求:有个菜单list,菜单里面非常多的食物列表,只选取小于400卡路里的并且按照卡路里排序,然后只想知道对应的食物名字. 代码: package com.cy.ja ...