0

之前在错误的部分中问过这个问题，所以我删除并现在重新发布。

我将如何以基于 % 的宽度居中 div，该宽度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>";
4

2 回答 2

0

对于初学者，您提供的表格没有显示任何内容，并且您的所有课程和 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

于 2013-09-11T08:27:41.663 回答
0

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

margin: 0 auto;

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

这是一个例子：

http://jsfiddle.net/SfSwa/

于 2013-09-11T07:42:05.433 回答