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

我不确定你是否只想把桌子的内容集中在一起？如果是这样，只需添加table {margin: auto;}即可。 JS Fiddle

Answer 2

尝试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来调整对齐。

希望它有用。

Answer 3

您可以将float属性添加到段落中。同时关闭所有锚标签。对称它不正确。

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

FIDDLE

Answer 4

将对齐中心添加到您的表格中，如下所示。

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

Answer 5

一些事情：

请务必关闭表格中的所有锚标记，因为您只关闭第一个。
考虑将您的图片和表放在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;
}

如何水平对齐表格和图像

5 个答案: