<!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的更多相关文章

  1. css 使图片水平垂直居中

    1.利用display:table-cell,具体代码如下: html代码如下: <div class="img_wrap"> <img src="wg ...

  2. html+css使图片在页面中循环滚动

    我们先通过html创建一个div盒子的框架,方便后续以及实际使用中调整位置. <!DOCTYPE html> <html> <head> <meta char ...

  3. CSS使图片变灰

    为了悼念,各大网站都纷纷将自己的站点颜色调灰,就连图片也一样,到底如何实现的呢,请看下面的代码. 〈img src="http://hovertree.com/hvtimg/201512/f ...

  4. css使图片变成黑白效果

    -webkit-filter: grayscale(%); -moz-filter: grayscale(%); -ms-filter: grayscale(%); -o-filter: graysc ...

  5. css 使图片紧贴底部显示

    img{ display: table-cell; vertical-align: bottom; }

  6. 只用CSS实现容器内图片上下左右居中

    一直以来,大家都知道,DIV容器内设置 text-align:center 即可让图片居中,但是DIV内默认的图片是上对齐,不会上下居中,如果想要实现这样的效果,JS判断是比较麻烦的,因为DIV容器内 ...

  7. <转载>使CSS文字图片div元素居中方法之水平居中的几个方法

    文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决 ...

  8. 使图片相对于上层DIV始终水平、垂直都居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 如何利用CSS代码使图片和文字在同一行显示且对齐

    对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同 ...

随机推荐

  1. 关键C函数备录

    一.搜索指定路径下的文件 (1) intptr_t _findfirst(const char *, struct _finddata_t *);//可以使用通配符*或? (2) int _findn ...

  2. TCP和Http的区别!(转) 真心有帮助！！！

    一.From:http://thisliy.javaeye.com/blog/710122 http://wenku.baidu.com/view/14a30d0102020740be1e9b84.h ...

  3. Could not publish server configuration for Tomcat v6.0 Server at localhost.错误问题解决

    经常在使用tomcat服务器的时候 总会发生一些莫名其妙的错误. 就像下面这个错误: 在配置文件中存在多个/MyWeb的配置,导致不能发布服务. 错误信息: Could not publish ser ...

  4. 条款3：尽可能的使用const

    const成员函数的一般好处有: 它使得class接口比较容易理解. 它使得操纵const对象成为可能. 使用的过程中应该在const与non const成员函数之间避免代码重复: class Tex ...

  5. SVN的搭建及使用（三）用TortoiseSVN修改文件,添加文件,删除文件,以及如何解决冲突，重新设置用户名和密码等

    添加文件 在检出的工作副本中添加一个Readme.txt文本文件,这时候这个文本文件会显示为没有版本控制的状态,如图: 这时候,你需要告知TortoiseSVN你的操作,如图: 加入以后,你的文件会变 ...

  6. mac和linux下使用Docker，部署SpringBoot项目到docker

    主要是看一下如何在linux及mac上安装docker,创建docker镜像,部署SpringBoot项目到docker,并借助于DaoCloud进行docker镜像下载加速等. 我用的电脑是mac, ...

  7. ng $http 和远程服务器通信的一个服务。

    $http({url:'',method:''}).success().error() 简洁写法:$http.get()$http.post()... 注意事项:①要求返回的数据格式是json格式②在 ...

  8. 21天学通C++_Day3_Part1

    今天奔跑吧兄弟来杭电了,决定不去看,宅在科协继续啃(反正去了也看不到咯),继续继续,今天白天没课,希望可以更两个. 0.C风格字符串 在数组中间把某个字符替换成‘\0’并不会改变数组的长度,但是显示时 ...

  9. PS更换证件照颜色

    PS是我们经常使用的设计软件,在生活中使用的范围也很广,但是对于普通的用户来说,也就是平时给自己的照片美化一下,还有就是做一些证件照.今天和大家分享的是更改证件照的颜色,网上可能有很多,但是个人感觉都 ...

  10. 【spring源码学习】springMVC之映射，拦截器解析，请求数据注入解析，DispatcherServlet执行过程

    [一]springMVC之url和bean映射原理和源码解析 映射基本过程 (1)springMVC配置映射,需要在xml配置文件中配置<mvc:annotation-driven >  ...