Question

我有一张表使用了1500px宽的背景图像。由于这比许多屏幕可以在没有滚动条的情况下查看更宽，我试图弄清楚如何将这个表居中在页面体内，以便变焦焦点始终位于表格图像的绝对中心，允许最左边和右边图像的两侧在关闭缩放时在屏幕外运行。

我发现给页面主体一个overflow-x：hidden属性允许双方在不创建滚动条的情况下在屏幕外运行，但我似乎无法将事物保持在缩放的中心。

我打算创建另一个表来包含这个表，左右tds可以根据需要进行扩展，但这还没有证明是富有成效的。

这是我的测试用例：

的CSS：

    #login_table {
        position:absolute;
        width:1500px;
        margin:auto;
        border:none;
    }
    .login_table_bookend {
        width:238px;
        height:896px;
    }
    #login_center_wrap {
        width:1024px;
        height:896px;
        background:url('center.jpg') no-repeat;
    }

HTML：

        <table id="login_table" cellpadding="0" cellspacing="0" align="center" >
        <tr>
            <td class="login_table_bookend" style="background:url('left.jpg') no-repeat;">
            </td>
            <td id="login_center_wrap">

            </td>
            <td class="login_table_bookend" style="background:url('right.jpg') no-repeat;">
            </td>
        </tr>
    </table>

Answer 1

您可以使用以下方法实现此目的：

#login_table {
    ...
    left: 50%;
    margin-left: -750px;  /* half of the width of the table */
}

Answer 2

您可以使用CSS进行垂直和水平对齐，只要您知道宽度和高度。

http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

如果您不知道宽度和高度（因为它有所不同），您可以随时使用javascript或jquery来获取它。

绝对居中一张大桌子

2 个答案: