0

我知道这个问题已经被问了一百万次了，而且我已经在我创建的其他网站中使用了所有这些解决方案，并且它们工作得很好。

但是，在我最近的情况下，通常的答案对我不起作用。

这是需要在其中居中放置其他元素的类（即列表、表格）：

.container {
    position: relative;
    width: 80%;
    height: 90%;
    background-color: #282828;
    box-shadow: inset -6px -6px 6px -2px #1d1d1d;
    color: #FFF;
    border-radius: 0 10px 0 0;
    float: left;
}

我添加了 ，因为我在其中position: relative放置了另一个孩子，其位置设置为。我实际上设法使事情居中，但这不是我需要的那种居中。当我在里面添加一个类似表格的 div 结构时，它直接回到了左边——不知道为什么。<div>.containerabsolute.container

我会很感激一些帮助。

JSFiddle：http: //jsfiddle.net/J3jm7/3/

4

2 回答 2

1

居中一个内联元素

要使内联元素居中，只需text-align:center在容器上使用。

.container {
    text-align:center
}

演示

使块级元素居中

用于margin:auto将块级元素（例如其容器内的表格）居中。

.container table {
    margin:auto;
}

演示

使列表居中

列表有点特殊，因为li { display: list-item; }. 要使 a 居中，<ul>您需要将其更改为inline-block元素并将其居中放在容器上。

.container {
    text-align:center
}

.container ul {
    padding:0;
    display:inline-block;
}

演示

于 2013-10-25T20:49:34.283 回答
0

您必须设置容器内元素的左右边距。这是一个示例，稍微修改您的代码，以便您可以看到表格元素上发生的居中：

<head>
    <style>
        .container {
            position: relative;
            width: 100%;
            height: 800px;
            background-color: #282828;
            box-shadow: inset -6px -6px 6px -2px #1d1d1d;
            color: #FFF;
            border-radius: 0 10px 0 0;
            float: left;
            border:1px solid black;
        }
            .container table {
                width:25%;
                height: 25%;
                margin-left:auto;
                margin-right:auto;
                border:5px solid blue;
            }
    </style>
</head>
    <body>
        <div class="container">
            <table></table>
        </div>
    </body>
</html>
于 2013-10-25T20:52:13.277 回答