Question

之前在错误的部分提到过，所以我删除了，现在重新发布。

我如何将基于％的宽度居中，并在页面底部指定了max-width？

如果我删除了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>";

Answer 1

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

margin: 0 auto;

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

以下是一个例子：

http://jsfiddle.net/SfSwa/

Answer 2

对于初学者，你所提供的表格没有显示任何内容，并且你的所有课程和ID都有双引号，我建议你检查你的编辑是否自动添加第二个。

我会说你包装div需要是“margin：auto;”也允许它调整到两侧，从而为你坐在中间。

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

这是一个宽度较小的JSFiddle，允许在演示框中进行演示。

http://jsfiddle.net/wrzNS/

对于应用程序和较小的设备，表本身也是坏的，我建议你只研究一下使用较少工作响应更快的div。

http://snook.ca/archives/html_and_css/getting_your_di

CSS HTML：底部的中心表（％-width，指定了最大宽度）

2 个答案: