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) 理念 利用表格 ...
随机推荐
- 【转】SQL2008的sa账户被禁用，其他账户无法连接的解决方法
或者你还有其它的sysadmin权限的账号,你可以用此账号登录,重置SA密码. 但是在以下情况下,怎么办呢? 1. SA密码丢失或者SA账号被禁用. 2. 你进行了一些安全操作,把BuiltinAdm ...
- 【原创】浅析密码学在互联网支付中的应用|RSA,Hash,AES,DES,3DES,SHA1,SHA256,MD5,SSL,Private Key,Public Key
一)概述 什么是互联网支付? 当支付遇到互联网,一场革命自然不可避免.成为现实的是传统的现金支付已经“退居二线”,各种在线支付方式成为人们日常消费的主要支付方式.银行推出的网银以及第三方支付公司推出的 ...
- java 如何查看jdk版本&位数
java 如何查看jdk版本&位数 CreateTime--2018年4月22日18:20:18 Author:Marydon 方式一:通过dos命令实现 win+R-->cmd-- ...
- php 5.3新特性
1.命名空间 解决了类,函数和常量名冲突的问题 2.静态绑定 继承时父类可以直接调用子类重写父类的方法 class A { public static function who() { echo __ ...
- java常见错误--Access restriction: The type BASE64Encoder
Access restriction: The type BASE64Encoder is not accessible due to restrict 在Eclipse中编写Java代码时,用到了B ...
- 【laravel5.4】关键字【use】使用
1.在namespace 和 class 之间使用,是引入类文件的意思,命名空间过长或者类文件同名,可以使用[as]区别 2.在class 类里面使用[use],是导入trait 类的意思,多继承的 ...
- MyEclipse 8.6插件下载
(源自网络:http://hi.baidu.com/%D4%B5%BA%A3%C7%E9%C9%EE/blog/item/ad86323d1e80a5e33d6d97c6.html 和 http:/ ...
- 微信小程序 HelloWorld
本篇文章由:http://xinpure.com/micro-applet-helloworld/ 微信官方文档及工具已经开放!!! https://mp.weixin.qq.com/debug/wx ...
- IOS开发之瀑布流照片墙实现
想必大家已经对互联网传统的照片布局方式司空见惯了,这种行列分明的布局虽然对用户来说简洁明了,但是长久的使用难免会产生审美疲劳.现在网上流行一种叫做“瀑布流”的照片布局样式,这种行与列参差不齐的状态着实 ...
- 使用SoapUI生成WS请求报文
WSDL地址示例:http://10.1.84.10:8100/webService/common/mail?wsdl 打开SoapUI,创建一个Project,输入wsdl地址就ok. 1.访问 ...