如何水平對齊表格和圖像

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小提琴

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（而不是ap標記）中，因為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;
}