用CSS使图片上下左右都绝对居中于DIV
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
<!--
* {margin:10;padding:10}
div {
width:180px;
height:180px;
border:1px solid #000;
position:relative;
display:table-cell;
text-align:center;
vertical-align:middle
}
div p {
position:static;
+position:absolute;
top:50%
}
div img {
position:static;
+position:relative;
top:-50%;left:-50%;
}
-->
</style></style>
</head>
<body>
<div>
<p><img src="http://www.domix.cn/static/team/2011/0225/12986229678396.jpg" width="120" height="120" /></p>
</div>
<div>
<p><img src="http://www.domix.cn/static/team/2011/0225/12986229678396.jpg" width="160" height="160" /></p>
</div>
<div>
<p><img src="http://www.domix.cn/static/team/2011/0225/12986229678396.jpg" width="130" height="160" /></p>
</div>
<div>
<p><img src="http://www.domix.cn/static/team/2011/0225/12986229678396.jpg" width="170" height="110" /></p>
</div>
</body>
</html>
用CSS使图片上下左右都绝对居中于DIV的更多相关文章
- css 使图片水平垂直居中
1.利用display:table-cell,具体代码如下: html代码如下: <div class="img_wrap"> <img src="wg ...
- html+css使图片在页面中循环滚动
我们先通过html创建一个div盒子的框架,方便后续以及实际使用中调整位置. <!DOCTYPE html> <html> <head> <meta char ...
- CSS使图片变灰
为了悼念,各大网站都纷纷将自己的站点颜色调灰,就连图片也一样,到底如何实现的呢,请看下面的代码. 〈img src="http://hovertree.com/hvtimg/201512/f ...
- css使图片变成黑白效果
-webkit-filter: grayscale(%); -moz-filter: grayscale(%); -ms-filter: grayscale(%); -o-filter: graysc ...
- css 使图片紧贴底部显示
img{ display: table-cell; vertical-align: bottom; }
- 只用CSS实现容器内图片上下左右居中
一直以来,大家都知道,DIV容器内设置 text-align:center 即可让图片居中,但是DIV内默认的图片是上对齐,不会上下居中,如果想要实现这样的效果,JS判断是比较麻烦的,因为DIV容器内 ...
- <转载>使CSS文字图片div元素居中方法之水平居中的几个方法
文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决 ...
- 使图片相对于上层DIV始终水平、垂直都居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 如何利用CSS代码使图片和文字在同一行显示且对齐
对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同 ...
随机推荐
- css3 伪类
::selection { 选中后的样式 } 链接 p:only-child p的父级只有一个p标签 p:only-of-type p的父级有一个p标签, 但还可以包含其他标签 p:fis ...
- Android application testing with the Android test framework
目录(?)[-] Android automated testing 1 How to test Android applications Tip 2 Unit tests vs functional ...
- elasticsearch聚合案例－－分组、求最大值再求最大值的均值
一.需求 A.B.C代表3个用户,第二列代表各自的得分,求A.B.C的最好成绩以及A.B.C最好成绩的均值 A 10 A 11 A 13 B 11 B 11 B 12 C 10 C 10 C 11 C ...
- HAWQ取代传统数仓实践（八）——维度表技术之角色扮演维度
单个物理维度可以被事实表多次引用,每个引用连接逻辑上存在差异的角色维度.例如,事实表可以有多个日期,每个日期通过外键引用不同的日期维度,原则上每个外键表示不同的日期维度视图,这样引用具有不同的含义.这 ...
- 11.求二元查找树的镜像[MirrorOfBST]
[题目] 输入一颗二元查找树,将该树转换为它的镜像,即在转换后的二元查找树中,左子树的结点都大于右子树的结点.用递归和循环两种方法完成树的镜像转换. 例如输入: 8 / \ 6 1 ...
- （二）js选择结构
1.js的执行顺序. a) 一般按照书写的顺序来执行. b) 另外一种是通过判断然后执行下一项语句. 注:一般讲js语句写在body内容的最后来执行. 2.js的结构 a) 顺序结构 ...
- 如何快速上手.net下单元测试工具NUnit？
NUnit基本使用 准备知识: 读此博文需要了解单元测试基本概念及NUnit的的安装. 传送门:单元测试之道(使用NUnit) 1.常见的错误 当学习一个新东西时,先学习错误,是最快的方式. 1.1 ...
- 【MFC】MFC技巧学习 当做字典来查
MFC技巧学习 摘自:http://www.cnblogs.com/leven20061001/archive/2012/10/17/2728023.html 1．"属性页的添加:创建对话框 ...
- 【前端】XHTML入门笔记
教程/XHTML 模块/XHTML 标准属性/XHTML 事件属性 XHTML 指可扩展超文本标签语言(EXtensible HyperText Markup Language). XHTML 元素必 ...
- ecmall分页
在Ecmall的二次开发中,分页是必不可少的.这个系统已经自带了分页功能,下面来看看如何使用这个分页. 下面是一个自定义的类,用于查看订单的详细情况.关键在于get_order_data()这个方法, ...