html - 在 元素内居中

Question

我知道这个问题已被问过一百万次，我已经在我创建的其他网站中使用了所有这些解决方案，它们运行良好。

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

这是一个需要让其他元素居中的类(即列表、表格):

.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因为我放了另一个 child <div>里面.container它的位置设置为 absolute .我实际上设法将事物居中，但这不是我需要的那种居中。当我在 .container 中添加一个类似表格的 div 结构时它直接回到左边 - 不知道为什么。

我会很感激一些帮助。

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

Answer 1

居中行内元素

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

.container {
    text-align:center
}

Demo

居中 block 级元素

使用 margin:auto将 block 级元素(例如表格)置于其容器的中心。

.container table {
    margin:auto;
}

Demo

居中列表

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

.container {
    text-align:center
}

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

Demo