html - 如何在 div 中将内容居中

Question

我正在尝试将包含 div 内的表格的内容居中...但我似乎无法弄清楚如何去做...

基本上我想在表格旁边放一些文本，并将表格和文本居中到页面...

我试图集中的内容：

        <div style="background: purple; padding: 5px;">
            <div>
            <table style="float: left;">
                <tr>
                    <th>This</th>
                    <th>is</th>
                    <th>a</th>
                    <th>test</th>
                </tr>
            </table>
            </div>
            <span style="background: yellow; margin-left: 15px; float: left;">This is a test</span>
        </div>

我试过的：

    <div style="background: red; width: 100%; text-align: center">
        <div style="background: purple; padding: 5px;">
            <div>
            <table style="float: left;">
                <tr>
                    <th>This</th>
                    <th>is</th>
                    <th>a</th>
                    <th>test</th>
                </tr>
            </table>
            </div>
            <span style="background: yellow; margin-left: 15px; float: left;">This is a test</span>
        </div>
    </div>

如果有人能够告诉我我在这里做错了什么，那将不胜感激。

Answer 1

您可以向内部 div 提供 ID，例如内部，将外部提供给顶部 div：

#outer{width:100%}
#inner{float:none;margin:0 auto;display:table;}

如果您发现任何问题，请告诉我！！

Answer 2

text-align:center您可以使用if they areinline或来居中元素inline-block。display:inline-block如果我们使用on移除浮动并将它们彼此相邻放置<table>，则可以使用此方法。

jsFiddle

CSS

table {
    display:inline-block;
}
.wrapper {
    text-align:center;
}

HTML

<div class="wrapper" style="background: purple; padding: 5px;">
    <table>
        <tr>
            <th>This</th>
            <th>is</th>
            <th>a</th>
            <th>test</th>
        </tr>
    </table>
    <span style="background: yellow; margin-left: 15px;">This is a test</span>
</div>

Answer 3

以下是你将如何做到这一点：

http://jsfiddle.net/7TEqW/2/

HTML：

<div class="outer">
    <div class="inner">
        <table>
            <tr>
                <td>TABLE TEXT</td>
            </tr>
        </table>
        <span>SPAN TEXT</span>
    </div>
</div>

CSS：

.outer {
    width: 100%;
    text-align: center;
}

.inner {
    display: inline-block;
    margin: 0 auto;
}

table {
    width: 200px;
    float: left;
    margin-right: 20px;
    background: #999;
}

span {
    display: inline-block;
    width: 100px;
    background: #ccc;
}

Answer 4

删除float:left并尝试添加margin:0 auto

.wrap{
background: purple; padding: 5px;    
    text-align:center;
    overflow:auto;
    position:relative
}
table{
    background:pink;
    margin:0 auto
}

span{
    background: yellow; margin-left: 15px;
        margin:0 auto
}

演示

Answer 5

将所需的内容放入 <p style="text-align: center;"> 元素中，它将水平居中。