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) 理念 利用表格 ...
随机推荐
- MVC时间对比及时间范围判断
方法一:使用DateTime.Compare 方法 public static int Compare( DateTime t1, DateTime t2 ) t1 早于 t2:小于零t1 与 t2 ...
- 用srvctl命令配置service
.用srvctl命令配置service 除了用DBCA图形方式,还能够使用命令方式配置service,这样的方法对于维护远程尤事实上用.不管是创建还是维护都是用一个命令srvctl,先看一下srvct ...
- TOMCAT清理
CreateTime--2017年7月10日08:54:00Author:Marydon 如何清理TOMCAT 方式一:通过tomcat的安装目录进行清理 找到TOMCAT的根目录,如图: 实质: ...
- 谷歌GSON的字符与对象的互转
import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; i ...
- python学习笔记之函数(方法)
def func(x): print 'x is', x x = 2 print 'Changed local x to', x x = 50 func(x) print 'x is still', ...
- _x和__all__（有所理解即可）
# -*- coding: utf-8 -*- #python 27 #xiaodeng #_x和__all__(有所理解即可) #_x #不能使用from module import *导入 [注意 ...
- C++开发WPF，Step by Step
示例代码 使用C++来开发WPF,主要是如何在MFC(Win32)的窗口中Host WPF的Page.下面我就做个详细的介绍. 一.创建工程, 由于MFC的Wizard会生成很多用不到的代码,所以我准 ...
- ant入门程序
一. ant简单介绍 Ant是apache的一个核心项目, 它的作用是项目自己主动化构建, 由于它内置了Javac.Java.创建文件夹.拷贝文件等功能, 直接执行build.xml文件就能够编译我们 ...
- word使用宏定义来统一设置图片大小
1. 首先手动拖拽将图片调到需要的格式,点击图片在格式选项中查看图片的宽高 2. 视图中点击宏新建 3. 编辑框中输入以下代码并保存,由于我只需要统一宽度,所以将统一高度的代码注释 Sub 图片格式统 ...
- [iOS]过渡动画之高级模仿 airbnb
注意:我为过渡动画写了两篇文章:第一篇:[iOS]过渡动画之简单模仿系统,主要分析系统简单的动画实现原理,以及讲解坐标系.绝对坐标系.相对坐标系,坐标系转换等知识,为第二篇储备理论基础.最后实现 Ma ...