0

我试图让一系列桌子从左到右并排放置，同时居中。

<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 中并告诉 to 将所有内容居中，但这似乎不起作用。任何帮助表示赞赏！

4

3 回答 3

0

Try changing the first div to:

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

As long as the margin-left is - half the width, this should work.

于 2013-05-31T11:11:00.607 回答
0

概念是设置宽度<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>
于 2013-05-31T11:14:44.750 回答
0

使用display:inline-block而不是float:left. text-align=center然后在封闭的 div 上使用 div 样式。还将需要添加vertical-align=top到每个表格样式。见这里：http: //jsfiddle.net/KJhhc/

于 2013-05-31T11:14:00.883 回答