网页垂直居中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

<!--

.kkkk {

background-color: #CCCCCC;

}

body {

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

}

-->

</style>

</head>

<body>

<tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></td>

</tr>

</table>

function OnResize()

{

window.document.getElementByIdx("mainDiv").style.height=document.documentElement.clientHeight + "px";

}

OnResize();

window.onresize = OnResize;

</script>

</body>

</html>

时间： 2024-10-28 05:39:34

网页垂直居中的相关文章

JavaWeb项目笔记包括jsp的用法selevt,HTML5

-------------------<认识HTML5>----------------- 1 <>生成的快捷键是table键 ctrl+D是直接复制一行 2 <h1>-<h6> 标题字体由大到小 <p> 段落 <br> 换行标签 <hr> 水平线标签 <em> 斜体 <strong> 字体加粗 ../ 返回上一级目录 > 大于号 < 小于号空格 " 引号"

网页中图片的垂直居中对齐

相信很多前端开发人员都曾遇到过需要将图片设置为垂直居中对齐的经历,我刚好在之前的一个项目刚刚解决了这个问题,使用的方法非常简单,兼容性也很好.具体做法如下: 1.只需要兼容各大现代浏览器: 父元素{ display:teble-cell; width:Npx; height:Npx; vertical-align:middle;} 2.如果要兼容IE7以前的低版本IE浏览器: 父元素{ display:teble-cell; width:Npx; height:Npx; vertical-ali

网页元素居中攻略记_(4)用CSS3属性让元素水平垂直居中

flex实现子块的完美居中方案父块使用display:flex属性,子块margin自适应即可实现代码 index.html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>块状元素垂直居中(已知高度)</title> <style> *{margin: 0;padding: 0;} .

网页元素居中攻略记_(3)已知宽高元素水平垂直居中

已知宽高元素水平垂直居中方案使用了position的absolute属来实现,在上篇文章的垂直居中的基础上加上水平居中代码 index.html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>已知宽高元素水平垂直居中</title> <style> #container { posit

网页元素居中攻略记_(2)元素垂直居中

单行内元素垂直居中方案设置行内元素的行高等于父元素的高度或者包裹块的高度即可实现垂直居中,具体看代码效果代码实现 index.html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>单行内元素垂直居中</title> <style> div { width: 200px; height

网页元素居中攻略记_(6)图片水平垂直居中

前言借助table的特性来实现代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css" media="screen"> .test{ display:table; heigh

网页元素居中攻略记_(5)未知元素宽高垂直居中

题外话以前,我们要自适应全局居中,需要借助JS或者JQ来实现,现在有了CSS3就可以省去好多功夫了,为什么这么说!! 请看比较: 传统的绝对居中 #container{ position:abosolute; top:50%; left:50%; margin-left:-包含块宽度的一半(如 -300px ); margin-top: -包含块高度的一半; } 这种是实现了包含块的绝对居中,但是有一个问题,就是宽高度无法自适应(需固定宽高)-比如动态增加数据的时候,用这个就不大合适了-.这时

垂直居中小记 line-height table vertical-align：middle

垂直居中分两种情况:1.父元素高度确定的单行文本 2.以及父元素高度确定的多行文本. 1.垂直居中-父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height高度一致来实现的,即此时单行文本的行高line-height=height(父元素块高度).(height: 该元素的高度,line-height: 顾名思义,行高(行间距),指在文本中,行与行之间的基线间的距离 ). line-height 与 font-size 的计算值之差,在

垂直居中的几种方法（转）

我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别是手机等web端网页经常是不固定高宽的div,那么这些div如何垂直居中呢?这篇文章,我总结一下. 固定高宽div垂直居中如上图,固定高宽的很简单,写法如下: position: absolute; left: 50%; top: 50%; width:200px; height:100px; margin-left:-100px; margin-top:-