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) 理念 利用表格 ...
随机推荐
- 手动脱NsPacK壳实战
作者:Fly2015 这里脱壳的程序是吾爱破解培训的作业2,相较于作业1略微要强一点,可是仅仅要掌握了脱壳的ESP定律,脱这个Nspack壳并不难.只是还是蛮有意思的. 1.使用查壳软件对加壳的程序进 ...
- js setInterval() 用法示例
Created by Marydon on 1.定义 语法:setInterval(param1,param2) param1 要调用的函数或要执行的代码串. param2 周期性调用param1 ...
- CentOS关闭休眠和屏保模式
CentOS关闭休眠和屏保模式 本人因为特殊需求,想让某台Linux主机始终显示某个程序,显示器不能关机或者休眠或进入屏保模式. 环境:Ubuntu 11.10 最小化模式安装并安装有轻量级桌面o ...
- spyder python 相关
1.python开发集成工具Spyder中,如何设置变量成员提示和代码补全呢? 答: pip install rope,安装好rope 就可以了 2.最常用的是:tap的制动补全 (IPython c ...
- 触发器学习笔记(:new，:old用法)
触发器学习笔记(:new,:old用法) 触发器是数据库发生某个操作时自动运行的一类的程序 用于保持数据的完整性或记录数据库操作信息方面 触发器不能够被直接调用,只能够 ...
- Fiddler 中请求时间的显示列
在Tool bar上面找到 Rules->CustomRules 在class Handlers{ 里面添加 //----------------------------显示请求时间,显示毫 ...
- 腾讯云-搭建 JAVA 开发环境
搭建 JAVA 开发环境 搭建 JAVA 开发环境 任务时间:18min ~ 20min 此实验教大家如何配置 JDK .Tomcat 和 Mysql 00.安装 JDK JDK 是开发Java程序必 ...
- opencv-3.0.0-beta和opencv2版本号的差别
我的机器:64位系统 第一步: opencv官网下载opencv3.0.0-beta版本号.解压到自己的目录,我的目录是E:\,解压后在E盘出现名为opencv的目录.该目录下有两个子目录 第二步:配 ...
- 【微信小程序】：评论、回复和删除功能 -- 2017/7/14
1.理论核心:传参->pid,评论父id需要在wxml页面传递:小程序端和WEB端不同核心:前者操纵数据,后者操纵DOM元素对象 2.不废话,直接代码:wxml <view class=& ...
- HDUOJ----Safecracker（1015）
Safecracker Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Tota ...