Question

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

更新主要目标是在没有窗口宽度的情况下保持页面的右侧部分可见。像：滚动到右边，但没有代码。调整大小时，代码会产生一些讨厌的跳跃。

Answer 1

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

#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），则这是次优解决方案。结论：您无法控制人们与您网站的互动方式，您可以做的就是尝试相应的计划。

Answer 2

快速示例如果这是您正在寻找的，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>

对齐页面内容

2 个答案: