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) 理念 利用表格 ...
随机推荐
- 解决Unable to load component class org.sonar.scanner.report.ActiveRulesPublisher/Unable to load component interface org.sonar.api.batch.rule.ActiveRules: NullPointerException
解决办法 Delete the directory data/es in your SonarQube installation. Restart SonarQube.
- springmvc自己定义拦截器
Spring MVC也能够使用拦截器对请求进行拦截处理,用户能够自己定义拦截器来实现特定的功能,自己定义的拦截器必须实现HandlerInterceptor接口. 直接看下样例: package co ...
- idea 配置多个jdk
1.File -->Project Structure 2.SDKs-->点击+号-->JDK-->目录选择到jdk文件夹所在的位置 3.选择jdk所在路径 4.可以配置多 ...
- 〖Windows〗Linux的Qt程序源码转换至Windows平台运行，编码的解决
在中国大陆,Windows默认的编码是gb2312,而Linux是UTF8: 多数情况下,把Linux上的程序转换至Windows上运行需要进行编码转换才能正常显示: 而其实大可以不必的,同样,文件使 ...
- hihoCoder 1014 Trie树 （Trie）
#1014 : Trie树 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描写叙述 小Hi和小Ho是一对好朋友.出生在信息化社会的他们对编程产生了莫大的兴趣,他们约定好互相帮 ...
- web服务器一些概念
一.Web服务器 Web服务基于HTTP协议,HTTP协议基于TCP/IP协议. HTTP请求底层必然是套接字,也就是TCP协议,HTTP服务器就是监听端口的一个守护进程. 它负责HTTP连接的建立. ...
- 【LeetCode】51. N-Queens
N-Queens The n-queens puzzle is the problem of placing n queens on an n×n chessboard such that no tw ...
- 解决 无法将文件" "复制到“bin\*.*”。对路径“bin\*.*”的访问被拒绝。
关于这个问题今天碰到了, 我的解决办法很简单: 删除bin目录下的所有文件,然后重新生成,就不报错了.
- 在 Asp.NET MVC 中使用 SignalR 实现推送功能 [转]
在 Asp.NET MVC 中使用 SignalR 实现推送功能 罗朝辉 ( http://blog.csdn.net/kesalin ) CC许可,转载请注明出处 一,简介 Signal 是微软支持 ...
- BIP_BI Pubisher的SQL/XSL/FO扩展函数应用（概念）
2014-12-01 Created By BaoXinjian