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

如果元素为text-align:center或inline，则可以使用inline-block对元素进行居中。如果我们使用display:inline-block上的<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 2

你可以提供ID到内部div说内部和说外部到顶部div：

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

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

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
}

<强> DEMO

Answer 5

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

如何在div中居中内容

5 个答案: