标签：style blog http io os 使用 java ar strong
<html>
<head>
<title>横向居中，垂直居中</title>
<style>
#div1{
width:600px;
height:100px;
border:1px solid #0F0;
position:absolute;
top:50%;
left:50%;
margin:-50px 0 0 -300px;
}
#div2{
width:100px;
height:600px;
background:#090;
position:absolute;
top:50%;
left:50%;
margin:-300px 0 0 -50px;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
2.如何实现一个层在浏览器中垂直左右居中？
让DIV水平和垂直居中，必需知道该DIV得宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50% 。
其实解决的思路是这样的：首们需要position:absolute;绝对定位。而层的定位点，使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。
如：一个层宽度是400，高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为－150。margin-left的值为－200。这样我们就实现了层垂直居中于浏览器的样式编写。
<style type="text/css">
<!--
div {
position:absolute;
top:50%;
left:50%;
margin:-150px 0 0 -200px;
width:400px;
height:300px;
border:1px solid #008800;
}
-->
</style>
3.点击上面的标题区域，拖动移动整个框。
<div id="movediv" style="width:250px;height:200px;border:2px #090 solid; position:absolute;left:400px;top:218px;">
<div id="movespan" style="background:#090;width:220px; height:50px; margin:5px auto;" >标题区!</div>
<div style="background:#999;width:220px;height:130px;margin:5px auto;"></div>
</div>
<script>
var dragdrop={
registerDragdropHandler:function(handler,target,cursor){ // 注册鼠标移动的一些事件。
var _IsMousedown=false,_ClickLeft=0,_ClickTop=0;
var _hDom=this.get(handler);
var _tDom=this.get(target);
_hDom.style.cursor=cursor||"move";
function startDrag(evt){ // 按下鼠标左键时的事件。
evt=window.event||evt; // 获取当前事件对象。
_IsMousedown=true; // 记录已经准备开始移动了。
_ClickLeft=evt.clientX-parseInt(_tDom.style.left); // 记录当前坐标轴。
_ClickTop=evt.clientY-parseInt(_tDom.style.top);
}
function doDrag(evt){ // 鼠标开始移动时的事件。
evt=window.event||evt; // 获取当前事件对象。
if(!_IsMousedown)return false; // 如果_IsMousedown不等于真了返回。
_tDom.style.left=evt.clientX-_ClickLeft+"px"; // 把鼠标当前移动的位置赋值给div
_tDom.style.top=evt.clientY-_ClickTop+"px"; // 当前位置减去开始位置就是层当前存放的位置。
}
function endDrag(){ // 释放鼠标左键时的事件。
if(_IsMousedown){ // 如果_IsMousedown还为真那么就赋值为假。
if(this.isIE) _tDom.releaseCapture(); //该函数从当前的窗口释放鼠标捕获，并恢复通常的鼠标输入处理。
_IsMousedown=false;
}
}
_hDom.onmousedown=startDrag; // 鼠标按下事件。
document.onmouseup=endDrag; // 鼠标释放事件。
document.onmousemove=doDrag; // 鼠标移动事件。
_tDom.onselectstart=_tDom.oncontextmenu=function(){return false;}; // 禁止选择和右键菜单。
},
isIE:(navigator.appName=="Microsoft Internet Explorer"), // 判断是否为IE。
get:function(element){ // 通过一串字符返回一个对象。
if(typeof(element) == "string"){
return document.getElementById(element);
}
return element;
}
};
// 使用方式如下：
dragdrop.registerDragdropHandler("movespan","movediv");
</script>
4.点击下面按钮出现提示框，再次点及其他地方按钮消失。
<style>
#msg{
width:180px;
border:1px solid #009933;
height:150px;
display:none;
background:#ffffff;
position:absolute;
text-align:center;
line-height:150px
}
#btn{
width:182px;
height:35px;
line-height:35px;
background:#009933;
position:absolute;
top:350px;
left:300px;
border-radius:10px;
text-align:center;
}
</style>
</head>
<body>
<div id="msg">提示框</div>
<div id="btn">按钮</div>
<script type="text/javascript">
//判断event指向的对象，比如判断元素的ID是否是给出
document.onclick = function (e) {
e =e || event; //e对象存在时回返e,当window.event存在时返回event,如果是IE下的 就走 window.event,不是就直接 e=e
var btn = document.getElementById("btn");
var msg = document.getElementById("msg");
var target = e.target || e.srcElement; //e.target 是目标对象,e.event是目标所发生的事件,ie下支持e.srcElement，ff支持e.target,e.target捕获当前事件作用的对象
if (target !== btn && target !== msg) {
msg.style.display = "none";
} else {
msg.style.top = (btn.offsetTop - 160) + "px"; //offsetTop当前对象到其上级层顶部的间隔.
msg.style.left = btn.offsetLeft + "px"; //当前对象到其上级层左边的间隔.
msg.style.display = "block";
}
}
</script>
</body>
</html>
5.如何在DIV层中实现文字的水平垂直居中。
假设你的DIV是高度100PX，宽度是1000PX，那你这样写，你的文字就会水平垂直居中：
<div style="width:1000px; height:100px; text-align:center; line-height:100px; border:blue solid 1px;overflow: hidden "> 水平垂直居中
</div> CSS是这样的，text-align:center意思就是说，让这个DIV里的文字水平居中，而line-height:100px;的意思是说，让DIV里面的每一行文字，占的高度为100PX（和那个DIV的高度一样），这样，文字就垂直居中了。也就是说，如果你的DIV是200PX高，那你就让line-height:200px;文字就会垂直居中了。最后，一定要加overflow: hidden，防止div中的内容溢出。
要想让图片左右对齐，我们可以在div里写入"style:text-align:center;"代码来实在div里写入"line-height:300px;vertical-align:middle"，发现IE7这时候也有效果了。但firefox图片还没垂直居中。（这里的"line-height:300px"是根据div的高度确定的。）
再对div增加样式："display:table-cell"，现在看看firefox也好了。
<style>
.photo{width:600px; height: 600px; border:1px solid #090;display:table-cell;overflow:hidden; text-align:center;vertical-align:middle}
</style>
</head>
<body>
<div class="photo"><img src="1.png" alt="你好"/></div>
</body>
</html>
标签：style blog http io os 使用 java ar strong
原文地址：http://www.cnblogs.com/qinxuemei/p/3979373.html
