Question

我最近学习了HTML，并且我遇到了一些以桌子为中心的麻烦。由于我的项目中有两个表位于相同的高度，因此我将一个表对齐到左侧，另一个表我想对齐到中心。由于它们处于相同的垂直位置，因此第一个表格很好，但第二个表格根据第一个表格右侧和网站右侧的距离居中。

我想知道如何将第二张桌子放在中心位置，忽略第一张桌子的方式，使其按照网站中心而不是根据桌子和网站中心进行居中。

目前的代码是这样的：

<table align="left" width="300" bgcolor="#454545">
    <tr height="65" bgcolor="565656" style="border-radius: 2%">
        <td><center><img src="facebookLogo.png" width="65" height="65"></center></td>
        <td><a href="https://www.facebook.com/somepagehere"><font size="4" color="#FFFFFF">&nbsp; Like our page at Facebook!</font></a></td>
    </tr>
    <tr height="65" bgcolor="565656" style="border-radius: 2%">
        <td><center><img src="twitterLogo.png" width="65" height="65"></center></td>
        <td><a href="https://www.twitter.com/someaccouthere"><font size="4" color="#FFFFFF">&nbsp; Follow us at Twitter!</font></a></td>
    </tr>
    <tr height="65" bgcolor="565656" style="border-radius: 2%">
        <td><center><img src="youtubeLogo.png" width="65" height="65"></center></td>
        <td><a href="https://www.youtube.com/someaccouthere"><font size="4" color="#FFFFFF">&nbsp; Check us on Youtube!</font></a></td>
    </tr>
    <tr height="20">
    </tr>
</table>

<table width="400" height="200" bgcolor="#000000" align="center">
    <tr></tr>
</table>

Answer 1

一些注意事项：

表格仅应用于表格数据。事实并非如此。
您应该分开内容和演示文稿。
- 这就是为什么<font>，<center>和bgcolor被弃用的原因。不要再使用它们了。
正如@rvighne所说，表格可能重叠。也许你有一个非常宽的屏幕，但这并不意味着每个人都有。

查看Demo

HTML：

<ul id="social">
    <li>
        <a href="https://www.facebook.com/somepagehere">
            <img src="facebookLogo.png" width="65" height="65" />
            Like our page at Facebook!
        </a>
    </li>
    <li>
        <a href="https://www.twitter.com/someaccouthere">
            <img src="twitterLogo.png" width="65" height="65" />
            Follow us at Twitter!
        </a>
    </li>
    <li>
        <a href="https://www.youtube.com/someaccouthere">
            <img src="youtubeLogo.png" width="65" height="65" />
            Check us on Youtube!
        </a>
    </li>
</ul>
<div id="other">
    Foo bar
</div>

CSS：

#social {
    width: 300px;
    background-color: #565656;
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    left: 0;
}
#social img {
    vertical-align: middle;
}
#social a {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
}

#other {
    width: 400px;
    height: 200px;
    margin: 0 auto;
    background: #ffc;
}

集中管理时忽略其他表

1 个答案: