Question

我试图让一系列桌子从左到右坐在一起，同时居中。

<div>
<table border="1px"; style="float:left";>
    <!--left side Advertisement-->
    <tr>
        <td>
            <p><img src="http://www.radiorebel.net/wp-content/uploads/2013/02/RadioRebelJamMaestroAd.png"></p>
        </td>
    </tr>    
</table>

<!--Player Table Collective-->
<table border="1px"; width="500"; height="500"; style="float:left";">
    <td>
        <!--Wavestreaming.com online Status-->
        <p>Status: <span data-shoutcast-value="status"></span></p>
        <!--Wavestreaming Song Title-->
        <p>Now Playing: <span data-shoutcast-value="songtitle"></span></p>
    </td>
    <td>
        <!--Album Art and PlayerTable-->
        <p>Album Art goes here</p>
        <p>Player goes here</p>
    <!--Third Table in the Player Collective-->
    </td>
    <td>
        <p>Stuff</p>
            </br>
        <p>stuff 2</p>
            </br>
        <p>stuff 3</p>
    </td>
</table>

<!--right side advert-->
<table border="1px"; style="float:left">
    <td>
        <p><img src="http://www.radiorebel.net/wp-content/uploads/2013/02/RadioRebelJamMaestroAd.png"></p>
    </td>
</table>

通过在我的表格中使用float:left，我可以让它们彼此相邻，但我无法将表格置于中心位置。我尝试将所有内容包装在一个div中并告诉要将所有内容都集中在一起，但这似乎不起作用。任何帮助表示赞赏！

Answer 1

尝试将第一个div更改为：

<div style='position: absolute; width: 80%; left:50%; margin-left: -40%;'>

只要左边距是 - 宽度的一半，这应该可行。

Answer 2

使用display:inline-block代替float:left。然后在封闭div上使用div样式text-align=center。还需要为每个表格样式添加vertical-align=top。看这里： http://jsfiddle.net/KJhhc/

Answer 3

概念是设置<div>的宽度，并指定margin-left和margin-right为auto。

<!DOCTYPE html>
<html lang="en-US">
<body>
<div style="width:1020px; margin:0 auto;">
<table border="1" style="float:left">
    <!--left side Advertisement-->
    <tr>
        <td>
            <p><img src="http://www.radiorebel.net/wp-content/uploads/2013/02/RadioRebelJamMaestroAd.png"></p>
        </td>
    </tr>    
</table>

<!--Player Table Collective-->
<table border="1" width="500" height="500" style="float:left">
    <td>
        <!--Wavestreaming.com online Status-->
        <p>Status: <span data-shoutcast-value="status"></span></p>
        <!--Wavestreaming Song Title-->
        <p>Now Playing: <span data-shoutcast-value="songtitle"></span></p>
    </td>
    <td>
        <!--Album Art and PlayerTable-->
        <p>Album Art goes here</p>
        <p>Player goes here</p>
    <!--Third Table in the Player Collective-->
    </td>
    <td>
        <p>Stuff</p>
            </br>
        <p>stuff 2</p>
            </br>
        <p>stuff 3</p>
    </td>
</table>

<!--right side advert-->
<table border="1" style="float:left">
    <td>
        <p><img src="http://www.radiorebel.net/wp-content/uploads/2013/02/RadioRebelJamMaestroAd.png"></p>
    </td>
</table>
</body>
</html>

三个独立的桌子从左到右坐在一起居中

3 个答案: