0

我的网页内容居中。调整浏览器窗口大小时 - 窗口宽度可能小于页面内容。在这种情况下，页面内容不居中 - 它是左对齐的。如果没有空间显示居中，有没有办法右对齐？

更新： 主要目标是在没有足够宽度的窗口时保持页面的右侧部分可见。类似于：向右滚动，但没有代码。调整大小时，代码会出现一些令人讨厌的跳跃。

4

2 回答 2

2

我会在容器上设置一个最小宽度，并在窗口变小时使用媒体查询来启动......

#my_div { margin: 0 auto; text-align: center; min-width: 900px; background: #999; }
@media all and (max-width: 899px){
    #my_div { text-align: right; background: red; min-width: auto; }
    #my_div #tableWrapper { overflow: auto; }
}

您不应该需要带有此代码text-align的标签。body如果您不希望在窗口变小时调整内容大小，请min-width: auto从#my_div媒体查询中的规则中删除。

示例：http: //jsfiddle.net/NXdYk/2/

编辑：

您可以将表格包装在另一个 div 中，并设置overflow: auto为在窗口太窄时允许滚动：

http://jsfiddle.net/NXdYk/6/

但是，如果表格是您的主要布局，并且明确设置了宽度（即内联 CSS），那么这是一个次优的解决方案。底线：您无法控制人们将如何与您的网站互动，您所能做的就是尝试相应地进行计划。

于 2013-05-09T07:46:39.203 回答
0

快速示例，如果这是您要查找的内容，则 js 脚本可以使其工作。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(window).resize(function() {
                if($(window).width() < $('#content').width()) {
                    $('#content').addClass('fr');
                } else {
                    $('#content').removeClass('fr');
                }
            });
        </script>
        <style type="text/css">
            #content{
                text-align: center;
                min-width: 500px ;
                margin: auto;
                border: 1px solid #000;
            }

            .fl{
                float: right;
            }
        </style>
        <!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="style_lte6.css" /> <![endif]-->
    </head>
    <body>
        <div id="content">something</div>
    </body>
</html>
于 2013-05-09T08:08:30.830 回答