Css 如何水平对齐表格和图像

我已经尝试了无数的可能性，试图得出一个结论，以及数小时的研究，但找不到这个问题的答案

我希望能够有一个与链接表内联的图像。这就是我所尝试的

html:

---

最终的结果给了我一个居中的图像，而表格被卡在图像的左下方。请尽快帮助我

我不确定您是否也在尝试将表格内容居中？如果是这样，只需添加表{margin:auto；}

试试Divs

<div class="firstpic"><div style="float:left"><img src="trout.jpg"></div>
<table>
    <tr>
        <th> <a href="flies.html">Flies</a> </th>
    </tr>
    <tr>
        <th> <a href="rodreels.html">Rod And Reel </th>
    </tr>
    <tr>
        <th> <a href="clothes.html"> Clothing </th>
    </tr>
    <tr>
        <th> <a href="shoes.html"> Footwear </th>
    </tr>
    <tr>
        <th> <a href="bait.html"> Baits And Lures </th>
    </tr>
    <tr>
        <th> <a href="gifts.html"> Gifts </th>
    </tr>
</table>
</div>

并使用CSS调整对齐方式

---

希望对您有所帮助。

您可以在段落中添加float属性。同时关闭所有锚定标签。对称地说，这是不正确的

p.firstpic {
text-align: center;
    float:left;
}

---

将“居中对齐”添加到表格中，如下所示

<table cellpadding="0" cellspacing="0" width="100%" border="0" align="center">

有几件事：

确保关闭表中的所有锚定标记，因为只关闭第一个锚定标记。 考虑把你的图片和表格放在一个div中，而不是一个p标签，因为div更传统地用来将项目分组在一起。 现在进入定位：

我建议将图像和表放在一个div中，并将float属性指定给图像，这样可以将图像和表保持在一起，因为它们在一个div中，并且应该对齐显示。 HTML:

---

这在很大程度上是可行的，但现在我遇到了两个错误。一个问题是，我仍然需要将表和图像分开，但它们是内联的。第二件事是，我在页面底部拥有的版权随着图片的移动而向上移动，而不是停留在页面底部。我不能100%确定你所说的分开是什么意思，但您可以始终将它们放在嵌套的div中，以使它们在代码方面保持独立。在图像周围放置一对div标记，在表周围放置一对div标记，但在最外层的div内。如果您的意思是希望它们在视觉上分开，则可以使用margin CSS属性。放‘左边距：px；’在CSS的“.firstpic img”部分中，用数值替换。若要将版权移到底部，请尝试将其样式设置为“清除”：两者都是。这迫使它位于浮动对象的下方，并且应该将它移回底部。左边的边距，我指的是右边的边距。左边距将增加图片左侧的边距，而不是右侧的边距，这是我认为您实际上想要的。有趣的是，从我的右边判断我的左边比创建和设计网页更难。

p.firstpic {
text-align: center;
    float:left;
}

<table cellpadding="0" cellspacing="0" width="100%" border="0" align="center">

<div class="firstpic">
    <img src="trout.jpg">
    <table>
        <tr>
            <th> <a href="flies.html">Flies</a> </th>
        </tr>
        <tr>
            <th> <a href="rodreels.html">Rod And Reel</a></th>
        </tr>
        <tr>
            <th> <a href="clothes.html">Clothing</a></th>
        </tr>
        <tr>
            <th> <a href="shoes.html">Footwear</a></th>
        </tr>
        <tr>
            <th> <a href="bait.html">Baits And Lures</a></th>
        </tr>
        <tr>
            <th> <a href="gifts.html">Gifts</a></th>
        </tr>
    </table>
</div>

.firstpic {
    text-align: center;
}

.firstpic img {
    float: left;
}