小问题：：如何让一个表格在IE 中居中显示
[问题点数：20分，结帖人ifeeling]
小问题：：如何让一个表格在IE 中居中显示
[问题点数：20分，结帖人ifeeling]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
相关帖子推荐：
本帖子已过去太久远了，不再提供回复功能。当前位置: >
Dreamweaver8.0教程3.4-嵌套表格
阅读工具：字体：
　　表格之中还有表格即嵌套表格。
　　网页的排版有时会很复杂，在外部需要一个表格来控制总体布局，如果内部排版的细节也通过总表格来实现，容易引起行高列宽等的冲突，给表格的制作带来困难。其次，浏览器在解析网页的时候，是将整个网页的结构下载完毕之后才显示表格，如果不使用嵌套，表格非常复杂，浏览者要等待很长时间才能看到网页内容。
　　引入嵌套表格，由总表格负责整体排版，由嵌套的表格负责各个子栏目的排版，并插入到总表格的相应位置中，各司其职，互不冲突。
　　另外，通过嵌套表格，利用表格的背景图像、边框、单元格间距和单元格边距等属性可以得到漂亮的边框效果，制作出精美的音画贴图网页。
　　创建嵌套表格的操作方法，先插入总表格，然后将光标置于要插入嵌套表格的地方，继续插入表格即可。
　　1、将光标放置在文档窗口要插入表格的位置，单击常用插入栏&表格&按钮，插入一个1行1列的表格一，宽度500像素，高度100％，边框为0，单元格间距为0，单元格边距为12像素。背景图像选择beij/003.gif。
　　2、将光标放置在表格一内，插入表格二，1行1列，宽度100％，高度100％，边框为0，单元格间距为0，单元格边距为12像素。背景图像选择beij/002.gif。
　　3、将光标放置在表格二内，插入表格二，1行1列，宽度100％，高度100％，单元格间距和单元格边距都为8像素，边框为10，边框颜色为#FEE4ED。背景图像选择beij/005.gif。
　　4、将光标放置在表格三内，选择单元格的背景图像为beij/006.gif。添加文字&恭贺新禧&，字号68px，字体为隶书，颜色为#A51008。
　　三、表格的格式化
　　做好的表格可以使用DW提供的预设外观，可以提高制作效率，保持表格外观的同一性，同时样式提供的色彩搭配也比较美观。
　　插入一个5行6列的表格，表格的宽为500像素，高为300像素，边框、单元格间距和边距全为0 。
　　选择表格，居中对齐表格后，执行命令/格式化表格，弹出&格式化表格&对话框，我们选择AltRows red格式，单击&确定&表格的样式就设定好了。
　　这里，还可以自己设定相应的参数值。
(责任编辑：大宝库)
------分隔线----------------------------
写在前面的话，各位网友制作爱好者，今天是日，中华人民共和国成礼60周年...
在发布网站之前先使用Dreamweaver MX 2004 站点管理器对你的网站文件进行检查和整理，...
Macromedia DreamweaverMX 2004提供了更多功能强劲的可视化设计工具、应用开发环境以...
赞助商链接
赞助商链接网页设计教程子分类css中水平垂直居中对齐布局实例总结_CSS教程_设计前沿
css中水平垂直居中对齐布局实例总结
文章出处：网络收集 作者：佚名　发布时间：
????? 关键词:css中水平垂直居中对齐布局实例总结水平居中，如果知道元素的宽度，则可以使用
.cell{width:300 margin:0 text-align:}
如果是内联元素居中，那么直接用text-align:center则行
如果未知元素宽度，并且非内联元素，那么下面给出的几种方案也适合你。
用CSS来实现元素的垂直居中效果是件苦差事，虽然说实现方法有多种，但有很多方式在某些浏览器下可能无法正常的工作。接下来我们就一起来看看这些不同方法实现垂直居中的各自优点和其不足之处。
方法一：这种方法用来实现单行垂直居中是相当的简单的，你只要保证元素内容是单行，并且其高度是固定不变的，你只要将其“line-height”设置成和“height”值一样就Ok了。不过这种方法局限性太大，只有单行文本的元素才适用，所以在多行元素中是不能使用这种方法的。
Html Markup
&div class="vertical"&content&/div&CSS Code:
.vertical {height: 100line-height: 100/*值等于元素高度的值*/}
适合在所有浏览器，没有足够空间时，内容不会被切掉
仅适合应用在文本和图片上，并且这种方法，当你文本不是单行时，效果极差，差到让你感到恶心。
这种方法对运用在小元素上是非常有用的，比如说让一个button、图片或者单行文本字段
第一种：相对定位法
原理是父类浮动的同时向左left:50%,而子类则向左浮动的同时left:50%;
&style type="text/css"&.centerlist {position:left:50%;float:}.centerlist li {position:right:50%; z-index:2;float:left}&/style&&ul class="centerlist"&&li&&a href="#"&Lorem ipsum dolor.&/a&&/li&&li&&a href="#"&Lorem ipsum dolor.&/a&&/li&&li&&a href="#"&Lorem ipsum dolor.&/a&&/li&&li&&a href="#"&Lorem ipsum dolor.&/a&&/li&&li&&a href="#"&Lorem ipsum dolor.&/a&&/li&&li&&a href="#"&Lorem ipsum dolor.&/a&&/li&&li&&a href="#"&Lorem ipsum dolor.&/a&&/li&&li&&a href="#"&Lorem ipsum dolor.&/a&&/li&&li&&a href="#"&Lorem ipsum dolor.&/a&&/li&&/ul&
第二种：强制内联
&style type="text/css"&.centerlist_inline{text-align:}.centerlist_inline li{display:}&/style&&ul class="centerlist_inline"&&li&&a href=""&lorem1&/a&&/li&&li&&a href=""&lorem1&/a&&/li&&li&&a href=""&lorem1&/a&&/li&&li&&a href=""&lorem1&/a&&/li&&/ul&
局限：块级元素改为内联元素，那么高度、宽度、margin-top,margin-bottom, padding-top,padding-bottom,等都不能用。
第三种： 使用inline-block
如果大家看过我之前写的inline-block替换float可能就会清楚这个属性的好处
&style type="text/css"&.centerlist_inline-block{text-align: font-size:0; -letter-spacing:-1}.centerlist_inline-block li{display: inline- *display: *zoom:1; font-size:12 letter-spacing: word-spacing:}&/style&&ul&&li&&a href=""&lorem1&/a&&/li&&li&&a href=""&lorem1&/a&&/li&&li&&a href=""&lorem1&/a&&/li&&li&&a href=""&lorem1&/a&&/li&&/ul&
&style type="text/css"&.centerlist_table-cell{display: margin:0}.centerlist_table-cell{display:table-}&/style&&ul class="centerlist_table-cell"&&li&&a href=""&lorem1&/a&&/li&&li&&a href=""&lorem1&/a&&/li&&li&&a href=""&lorem1&/a&&/li&&li&&a href=""&lorem1&/a&&/li&&/ul&
缺点是不兼容ie6，ie7
推荐使用inline-block这种水平居中的方法，既保留了块级元素特性，而且完美兼容。就是代码有点多。另外你还可以使用表格的方式来水平居中。
说完了水平居中，下面说垂直居中。
如果元素是内联元素，并且只有一行，则我们可以通过line-height来设置与其高度同样大小，则实现了垂直居中了。
多行文字的水平垂直居中
一、大小不固定，多行文字的垂直居中
① 单行文字可能很多人都知道如何让单行文字垂直居中显示，就是使用line-height，将line-height值与外部标签盒子的高度值设置成一致就可以了。例如如下css代码：height:3 line-height:3 ……显示结果如下图：
单行文本垂直居中对齐
② 多行文字如何实现父容器高度固定，文字可能一行，两行或更多行的垂直居中对齐呢？实现的关键是把文字当图片处理。用一个span标签将所有的文字封装起来，设置文字与图片相同的display属性（inline-block属性），然后用处理图片垂直居中的方式处理文字的垂直居中即可。核心css代码如下，外部div标签：
div{display:table- width:550 height:1.14 padding:0 0.1 border:4px solid # color:#069; font-size:10 vertical-align:}
内部span标签：
span{display:inline- font-size:0.1 vertical-align:}
行数不固定文字垂直居中对齐有几点简要说明：1.此例子用em做单位，如果您对em单位了解不够，把握不来的话，可以使用px做单位，值要换；2.外部div不能使用浮动；3.外部div高度和文字大小比例1.14为宜；4.内部标签的vertical-align:middle可以省略，但是外部div高度和文字大小比例要修改，我自己试了一下，高度比字体1.5左右的样子；5.系统原因，我没能够在IE8下测试。
实现的最终效果和JavaScript演示，您可以狠狠地点击这里⤴去看看。
二、大小不固定，图片的水平垂直居中
① 透明gif图片+背景定位的方法这里利用了background-position:center实现图片居中显示。这是个很实用也是很聪明的办法，对于维护控制成本都很不错。微软必应图片搜索的图片排列就是使用的这种方法。方法的原理很简单，使用一个透明的gif图片做覆盖层，高宽拉伸至所需要的大小，然后给这个gif图片一个background- position:center center的属性。而background-image建议写在页面上，因为实际项目中，这肯定是个动态的URL地址，css文件似乎不支持动态URL 地址。
??????????????
相关栏目导航DW电子教案第二章_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
文档贡献者贡献于
评价文档：
53页免费37页5下载券22页免费254页5下载券33页2下载券36页1下载券37页5下载券30页1下载券30页5下载券30页5下载券
喜欢此文档的还喜欢39页免费7页免费22页1下载券13页5下载券80页1下载券
DW电子教案第二章|D​W​ ​教​案​ ​课​件
把文档贴到Blog、BBS或个人站等：
普通尺寸(450*500pix)
较大尺寸(630*500pix)
大小：715.50KB
登录百度文库，专享文档复制特权，财富值每天免费拿！
你可能喜欢}