2

テーブルを含むコンテンツを 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>

ここで私が間違っていることを誰かが教えてくれたら、とても感謝します。

4

5 に答える 5

0

削除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
}

デモ

于 2013-04-03T10:15:27.003 に答える
0

これを行う方法は次のとおりです。

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;
}
于 2013-04-03T10:11:19.887 に答える