在各浏览器和各分辨率下如何让div内的table垂直水平居中?

本文主要针对需要全屏显示的系统页面内,因为系统经常会用到表格table布局,偶尔的table需要显示在div的正中间,所以鄙人特此总结下div内table的万千姿态。

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

<title>i冰冰的个人博客</title>

</head>

<body>
<div style="width:500px;height:500px;background-color:Red;">
<table style="width:100px;height:100px;background-color:Blue;">
<tr>
<td>
喜欢你,始于颜值,陷于才华,忠于人品,痴于肉体,死于不敢主动。
</td>
</tr>
</table>
</div>
</body>

</html>
---------------------------------------

红色div里有个蓝色table,现在table可以水平居中.请问:
如何让table水平靠右或水平靠左?
如何让table垂直居中或居上或居下?

---------------------------------------

1.让table在水平方向上的靠左和靠右
table水平靠左:
<table style="width:100px;height:100px;background-color:Blue;margin:0px auto;" align="left">
table水平靠右:
<table style="width:100px;height:100px;background-color:Blue;margin:0px auto;" align="right">
关于水平靠左靠右可以用:margin:0px auto; align="left" 或者" right";
或者在div里面给这个table定义:div { text-align:right 或者 left}

2.通过DIV控制TABLE--------》这里是正居中

<style type="text/css">
#Frame
{
width:500px;
height:300px;
background-color:#666666;
position:absolute;
left:50%;
top:50%;
margin-left:-250px;
margin-top:-150px;
}
</style>

................
<div id="Frame">
<table>
<table>
<div>
................
见证奇迹的时刻到了,垂直水平居中了有木有??

3.对,你没看错,小结如下:

所有的居中都可以用margin来实现,关于水平靠左靠右可以用:margin:0px auto; align="left" 或者" right";
或者在div里面给这个table定义:div { text-align:right 或者 left}

关于table整体垂直居中、靠上、向下,也可以用margin来完成,不过得根据div的高度和table的高度来决定,也就是说高宽都是死的固定值时可以用margin来做计算用。

4.然如果div和table都用的百分比的话呢?

<style type="text/css">
#Frame
{
width:500px;
height:300px;
background-color:#666666;
position:absolute;
left:50%;
top:50%;
margin-left:-50%;
margin-top:-30%; /*此处根据实际的页面情况去定义*/
}
</style>

................
<div id="Frame">
<table>
<table>
<div>
................

在不固定值的百分比布局页面内,table也是可以乖乖的正居中在div内的。

看官,请笑纳!冰冰奉上……

时间: 2024-08-12 04:11:55

在各浏览器和各分辨率下如何让div内的table垂直水平居中?的相关文章

Selenium2学习-024-WebUI自动化实战实例-022-网站不同分辨率下页面样式展示兼容性问题解决方案 -- 设置浏览器显示区域大小(无人值守,节约测试成本的福音,BOSS 最爱)

在 Web UI 自动化测试的过程中,通常会测试页面在不同分辨率下的显示效果,即在不同大小的显示器上全屏浏览器后的页面展示,此种测试方法需要购置不同大小的显示器,或者频繁的设置屏幕分辨率,不仅浪费了大量的金钱,同时也需要有人值守,从而使测试变成了半自动化,背离了自动化测试的初衷,也在一定程度上困扰了一定的自动化测试人员. 其实,不同分辨率下的测试,在一定程度上可以看做是浏览器窗口最大化后,浏览器可显示区域的页面样式兼容性测试.此文通过设置浏览器页面显示区域大小,从而摆脱上述种种问题的束缚.只需要

css绝对定位如何在不同分辨率下的电脑正常显示定位位置?

有时候我们在写页面中,会发现绝对定位的父级元素已经相对定位了,但是在不同分辨率的电脑下,绝对定位还是会错乱,似乎父级的相对定位并没有起了作用. 首先要明白如下几个原理: 1.笔记本电脑的分辨率一般为1366*768附近, PC电脑的分辨率一般为 1920*1080: 以下为常见电脑分辨率: 当写网页时,如果在1920这样的大分辨率写好之后,再去小分辨率的笔记本看同样的这个网页,会发现,笔记本电脑显示的基本为宽屏大显示器下网页放大至1.5倍左右的展示效果. 2.为了页面在不同的分辨率下正常显示,要

Android应用Icon大小在不同分辨率下定义

http://www.ard9.com/gsjj/204.html 对于Android平台来说,不同分辨率下Icon的大小设计有着不同的要求,对于目前主流的 HDPI即WVGA级别来说,通常hdpi的应用icon大小为72x72,而标准的mdpi即hvga为48x48,对于目前HTC和Motorola 推出的一些QVGA的使用了ldpi,图标为32x32 对于Android平台来说,不同分辨率下Icon的大小设计有着不同的要求,对于目前主流的HDPI即WVGA级别来说,通常hdpi的应用icon

支持多种浏览器的纯css下拉菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312

笔记本1080分辨率下QQ面板字体修改

买了台新的笔记本,终于用上了高大上的1080分辨率,但是在我的笔记本的1080分辨率下QQ面板字体显示很小,肿么办?于是百度了下,看到这一篇文章,转载过来 QQ2011面板字体修改 QQ2011字体修改自己也是在学习,略知一二,修改QQ字体和颜色,主要涉及到腾讯QQ的加密文件gmd,,而gmd文件成百上千,多如牛毛,里面的语言调用代码颇为复杂,还有很多的地方未能发现和修改.1.修改的路径:(本人滴QQ安装路径)D:\Program Files\Tencent\Resource.1.71.3019

自动生成Android不同分辨率下的图片

Android屏幕分辨率适配的图标处理比较麻烦,让UI做不同尺寸的图片也挺浪费时间的,并且容易出错,于是用Python写了个工具自动化处理图片,UI只需要做好1080*1920分辨率下的图片就可以了,其它分辨率的图片自动生成. import os.path import sys from PIL import Image """ 自动生成不同分辨率下的App图片 UI设计1080*1920分辨率图片,放在drawable-xxhdpi目录下,自动生成其它的分辨率图片 &quo

css 图片内容在不同分辨率下居中显示(演示的图片宽度是1920px,当图片宽度大于显示屏的宽度时)

1.img 图片内容在不同分辨率下居中显示(如果隐藏多余,在img外面套一个div  设定overflow: hidden.div的大小就是img显示区域的大小) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title&

ie浏览器float right 向下错位解决办法

ie  360 浏览器float right 向下错位解决办法 span 当设置其float:right;时,其向下一行错位时 最佳办法:将span移到所要显示的文字前面 其次办法:在span母容器的css里添加position:relative; 在span的css里添加position:absolute;right:0px;解决. 我选择第一种,搞定! 转载http://yijianfengvip.blog.163.com/blog/static/1752734322012324442422

【Unity NGUI游戏开发之三】TweenPosition位移动画(二):相对于UIAnchor不同分辨率下的完美适配位移动画

Unity中的UI我们采用的是NGUI,NGUI的界面位移动画,我们一般使用的是TweenPosition. 一种是简单的相对位移,不考虑分辨率适配问题,只需要简单的从位置A到位置B,已经在文中介绍了: [Unity NGUI游戏开发之二]TweenPosition位移动画(一):不相对于Anchor的位移动画 另外一种是考虑到屏幕分辨率适配的位移动画,我们游戏中大多遇到的是这种情况. eg.我们想让一个UI从屏幕外沿着屏幕的左边移动到屏幕的中央,TweenPositon播放动画,在960*64