html - 指定最大宽度的 CSS HTML : center table on bottom (%-width,)

标签 html css internet-explorer

这是之前在错误的部分中提出的问题,所以我删除了它,现在重新发布。

我如何将宽度为 % 且在页面底部指定了 max-width 的 div 居中?

如果我删除 max-width 样式,我可以将它放在页面底部的中心,但是一旦我尝试指定它它就会中断。

如能提供任何帮助,我们将不胜感激,因为这是我的应用程序在打包并发布之前面临的最后一个障碍。 :D

编辑:

几乎总是这样,在尝试清理我的发布来源时,我有一个最后一刻的想法,瞧,它奏效了。

            string docText =
            @"<!DOCTYPE html><html>
            <style type=""text/css"">
                table { 
                    border-collapse: collapse;
                    width: 100%; 
                    word-break: keep-all; 
                    word-wrap: break-word; 
                    overflow: hidden; 
                    }

                table td { 
                    border: 0px; 
                    word-break: keep-all; 
                    word-wrap: break-word; 
                    vertical-align: top; 
                    padding: 2px 8px; 
                    }

                div.inner { 
                    margin-left: auto; 
                    margin-right: auto; 
                    //border: dotted red 1px; 
                    max-width: 800px; 
                    }

                div.outer {
                    width: 98%;
                    position: absolute;
                    bottom: 0px;
                    //border: dotted black 1px;
                    }

                </style>
            <script>
                function addRow(text1, text2) {
                    var tbody = document.getElementById('tbody');
                    var tr=document.createElement(""TR"");

                    var td=document.createElement(""TD"");
                    td.innerHTML = text1; 
                    td.align = ""right"";
                    td.valign=""top"";
                    tr.appendChild(td);

                    td = document.createElement(""TD"");
                    td.innerHTML = text2;
                    td.style.wordBreak=""keep-all"";
                    td.style.wordWrap=""break-word"";
                    tr.appendChild(td);

                    tbody.appendChild(tr);
                    }
                </script>

            <body><div class=""outer""><div class=""inner""><table>

            <colgroup>
                <col style=""width: 60px; align: right; vertical-align: top;"">
                <col style=""width: 90%; align: left; vertical-align: top; "">

            </colgroup>
            <tbody id=""tbody""> 

            </tbody></table></div></div></body></html>";

最佳答案

您应该能够使用边距将具有百分比宽度和最大宽度的 div 水平居中:

margin: 0 auto;

会根据父容器的大小水平调整左右边距。

这是一个例子:

http://jsfiddle.net/SfSwa/

关于html - 指定最大宽度的 CSS HTML : center table on bottom (%-width,),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18735219/

相关文章:

javascript - 通过 jQuery 将动态生成的输入值传递到隐藏的输入中

html - 我的 <div> 元素内的背景颜色使用 CSS

javascript - 当元素的值为空时,如何删除元素的高度?

javascript - 在 html 文件中包含 no cache 元标记是否也会阻止缓存该 html 文件中链接的 js 和 css 文件?

php - 如何使用 php 将 VML 转换为 png

jquery - 修改文本的属性而不是按钮上的 CSS 图标

php - 如何从 $_POST 数组中删除元素?

javascript - 绝对定位不适用于 Javascript DIV

IE 中的 Javascript 语法错误

css - ie7 z-index 错误...无法修复