css - 如何水平对齐表格和图像

Question

我尝试了无数种可能性来尝试得出结论，并进行了数小时的研究，但找不到这个问题的答案!

我希望能够将图像与链接表内联。这是我试过的..

html:

<p 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 </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>
</p>

CSS:

p.firstpic {
text-align: center;
}

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

Answer 1

一些事情:

• 请务必关闭表格中的所有 anchor 标记，因为您只关闭第一个。
• 考虑将您的图片和表格放在 div 中，而不是 p 标签中，因为 div 通常用于将元素分组在一起。

现在开始定位:

我建议将图像和表格放在一个 div 中，并将 float 属性分配给图像，这将使图像和表格保持在一起(因为它们在一个 div 中)并且应该将它们显示在一行中。 HTML:

<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>

CSS:

.firstpic {
    text-align: center;
}

.firstpic img {
    float: left;
}