用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代码使图片和文字在同 ...
随机推荐
- 【Hive】任务空间不足错误
hive中跑任务的时候报错 2014-10-09 10:40:27,368 Stage-1 map = 100%, reduce = 32%, Cumulative CPU 2772.48 sec 2 ...
- 201621123003《Java程序设计》第一周学习总结
#1. 本周学习总结 本周主要学习了Java的jdk.jvm.jre等基本概念,Java的发展史,知道Java语言的跨平台.面向对象等主要特点,简单了解了Java程序的编译和运行过程.对于学习Java ...
- 读书笔记-Ribbon源码分析
@LoadBalanced注解用来给RestTemplate做标记,以使用负载均衡的客户端来配置. 通过搜索LoadBalancerClient可以发现,LoadBalancerClient是Spri ...
- ajax跨域解决
https://blog.csdn.net/csdn_ds/article/details/73691134 Access-Control-Allow-Origin 跨域设置多域名:http://ww ...
- 浅谈java使用指定字符集编码，以及常见的字符集
问题的引入:在InputStreamReader(OutputStreamWriter)的构造方法中,有指定字符集编码,那么什么是字符集?有哪些常用的字符集?怎么用字符集进行编码? 一 什么是字符 ...
- PHP 去掉文文文件中的回车与空格
文本文件fff.txt中去除回车与空格: $aa = file_get_contents('./fff.txt'); $bb = str_replace(array("\r\n", ...
- 【英语】Bingo口语笔记(87) - 不要做某事的常见表达
- MATLAB的一些应用--最近用的比较多
MATLAB的一些应用--最近用的比较多 1.MATLAB分析信号的频谱 快速Fourier变换(FFT)是离散傅里叶变换的快速算法,他是根据离散傅里叶变换的奇.偶.虚.实等特性,对离散傅里叶变换的算 ...
- 重温CLR（四）基元类型、引用类型、值类型
编程语言的基元类型 编译器直接支持的数据类型称为基元类型(primitive type).基元类型直接映射到framework类型(fcl)中存在的类型. 下表列出fcl类型 从另一个角度,可以认为C ...
- PING分组网间探测 ICMP协议
1.Ping的基础知识 Ping是潜水艇人员的专用术语,表示回应的声纳脉冲,在网络中Ping 是一个十分好用的TCP/IP工具.它主要的功能是用来检测网络的连通情况和分析网络速度.是ICMP的一个 ...