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>
一个div在页面中上下左右居中的样式如下：
.Div {
width:500px;
height:300px;
margin:-150px 0px 0px -250px;
position:absolute;
top:50%;
left:50%;
background:red;
}
div层上下左右居中的更多相关文章
- div元素上下左右居中
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- DIV层漂浮居中
<style type="text/css" title="currentStyle" media="screen" mce_bogu ...
- div内容上下左右居中
<!-- 遮罩层 --> <div id="test" > <div style="position:absolute;top:50%;le ...
- 多行文字在一个div中上下左右居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css div图片上下左右居中
<style type="text/css"> div{border:1px solid #ccc;height:500pc;width:500px;text-alig ...
- 使一个div元素上下左右居中
第一种方法 浮动流自我调节 .box{ widht:200px; height:200px; position:relative; } .box .son{ width:100px; height:1 ...
- css：子元素div 上下左右居中方法总结
最近在面试,不停地收到了知识冲击,尤其是对于一些基础的css.html.js问题居多,所以自我也在做反思,今天就css问题,如何让一个子元素div块元素上下左右居中 (以下总结方法,都已得到验证). ...
- css div上下左右居中
相信大家都会遇到这样的问题,要求一个块上下左右居中,在这里我总结了几个好用的方法 1.已知要居中的块width height 假设 content 要在f里上下左右居中 <div class＝ ...
- 用CSS让DIV上下左右居中的方法
转载自喜欢JS的无名小站 例如 一个父div(w:100%;h:400px)中有一个子div(w:100px;100px;).让其上下左右居中. 方法一(varticle-align) 理念 利用表格 ...
随机推荐
- jquery选中以什么开头的元素
$("[id^=percent]").size() ^=:表示以什么开头 $=:表示以什么结尾 ~=:表示包含什么 id:表示按id选择
- load()和get()的区别
区别1:如果数据库中,没有userId的对象.如果通过get方法加载,则返回的是一个null:如果通过load加载,则返回一个代理对象,如果后面代码如果调用user对象的某个属性(比如user.get ...
- Oracle EBS SLA(子分类账)
SLA概述 SLA(Subledger Accounting) 子帐是子分类帐会计的简称,字面上的含义就是子分类帐会计分录 SLA常用表介绍 在SLA中技术方面最常用的就是日记账来源追溯,在追溯的过程 ...
- wordpress调用函数大全
WordPress模板基本文件 style.css 样式表文件 index.php 主页文件 single.php 日志单页文件 page.php 页面文件 archvie.php 分类和日期存档页文 ...
- Oracle常见的异常处理
总结了在操作数据库的时候常常遇见的Oracle异常以及处理方法. 代码 提示 备注 一般处理方法 ORA-01861 文字与格式字符串不匹配- ORA-00904 invalid column nam ...
- 理解并使用.NET 4.5中的HttpClient（转）
原文地址:http://www.cnblogs.com/wywnet/p/httpclient.html HttpClient介绍HttpClient是.NET4.5引入的一个HTTP客户端库,其命名 ...
- 转载：PHP JSON_ENCODE 不编码中文汉字的方法
1.PHP版本5.4(包含)+ json_encode($data, JSON_UNESCAPED_UNICODE); //必须PHP5.4+ 2.PHP版本5.4- function encode_ ...
- vim+xdebug调试PHP
一.安装xdebug 1.编译安装xdebug,也可以使用pecl install xdebug wget http://xdebug.org/files/xdebug-2.3.2.tgz tar - ...
- Java优化技巧
过早的优化是万恶之源. 优化了的代码可读性变差,可改性可适应性变差,可维护性变差. 远离过度优化,优化是个无底洞,把主要精力放在代码逻辑上. 优化的代码是活在当下的,是严重依赖硬件的,不利于表达永恒的 ...
- eclipse 垃圾回收器，内存释放
http://zhangrong-0825-163-com.iteye.com/blog/7334071.如何在eclipse里修改web工程的访问路径,步骤如下: 点击web工程——>选择pr ...