使一个div始终显示在页面中间

假设我们有一个div层:<div id=”myDiv”></div>

首先,我们用css来控制它在水平上始终居中,那么我们的css代码应该是这样:

<style type=”text/css”>

*{margin:0;padding:0;}

#myDiv{width:400px;height:200px;margin:0 auto;}

</style>

这里的400px是你需要居中设置的div的宽度,200px是它的高,margin:0 auto;是控制水平居中的代码

jquery代码应该是这样:

<script type=”text/javascript”>

$(function{

//获得当前浏览器的内部高(即:不包含外边框和地址栏,工具栏的高)

var height = window.innerHeight;

//设置内容显示在中间

//这里的200是你要居中显示的div层的高,注意这里没有px

if(height> 200){

//设置要居中显示的div层的外边距

//myDiv是它的id

$("#myDiv").css("margin-top",(height-200)/2);

}

//设置当浏览器的大小改变时触发的事件

$(window).resize(function(){

//获得当前浏览器的高

varheight = window.innerHeight;

//设置内容显示在中间

if(height> 200){

$("#myDiv").css("margin-top",(height-200)/2);

}

});

});

</script>

时间: 2024-10-10 00:49:59

使一个div始终显示在页面中间的相关文章

让一个div始终固定在页面的某一固定位置的方法

方法一:直接用position:fixed 方法二:写一个滚动条滚动事件,让这个div设置 position:absolute 该top的距离等于滚动的距离scrollTop() 写法如下:$(window).scroll(function(){                   var tops = $(this).scrollTop();                  $('.Return_header').css({'top':tops})            })

指定元素始终显示在页面顶端的js特效

实现如图效果,页面下滑时,搜索框一直显示在页面顶端. 引入jquery之后: $(function () { var ie6 = document.all; var dv = $('#gdsearch'), st; dv.attr('otop', dv.offset().top); //存储原来的距离顶部的距离 $(window).scroll(function () { st = Math.max(document.body.scrollTop || document.documentElem

怎样使一个div标签随着浏览器窗口的改变一直居中显示

在我们开发页面的过程中,经常会遇到让div居中在浏览器中显示,或使div标签在父级div中居中显示,下面就是解决方法1.在浏览器中居中显示 <style> .main{width:200px;height:200px;margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;} </style> <div class="main"></div> 2.在父级

让div始终显示在底部

html代码: <div class="container"> <div cass="header"></div> <div class="body"></div> <div class="footer"></div> </div> 注意:千万不能设置.container的高度为100%,否则将无法随滚动条的滚动而滚动. 第一种情况

使一个div定位在浏览器中间

#div { width:300px; height:200px; border:30px solid #8B8B8B; position:fixed; top:50%; left:50%; margin:-130px 0 0 -180px; } 值得注意的是,使用margin调整位置的时候,如果有设置边框border, 那么div的实际宽度就是width + border-left + border-right,高和宽同理

css3 实现鼠标放到一个div上显示出另一个隐藏的div

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"/> <title>CSS Test Page</title> <style type="text/css"> *{ margin: 0; padding: 0; } .cent{ background:#0CF; height:200p

VC使一个对话框不显示

//add  this void CbkDlg::OnNcPaint() { ShowWindow(SW_HIDE); CDialog::OnNcPaint(); } 初始化时添加 ModifyStyleEx(WS_EX_APPWINDOW,WS_EX_TOOLWINDOW); 解释: WS_EX_APPWINDOW属性 MSDN的解释是: Forces a top-level window onto the taskbar when the window is visible. 把顶层的并且可

JQuery 弹出层,始终显示在屏幕正中间

1.让层始终显示在屏幕正中间: 样式代码: Html代码   .model{ position: absolute; z-index: 1003; width:320px; height:320px; text-align:center; background-color:#0066FF; display: none; } jQuery代码: Js代码   //让指定的DIV始终显示在屏幕正中间 function letDivCenter(divName){ var top = ($(windo

html之div始终停留在屏幕中间部分

需求: 使得某一个div始终停留在屏幕中间 实现: Html代码   <!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>