How do I horizontally align a table and an image

Question

I have tried an endless amount of possibilities to try and come to a conclusion, as well as hours of research, but cannot find an answer to this question!

I want to be able to have an image inline with a table of links. this is what i have tried..

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

The end result gives me a centered image, while the table is stuck below and left of said image. Please help me as soon as possible!

Answer 1

I'm not sure if you are just trying to center the table's content as well? If so, just add table {margin: auto;} . JS Fiddle

Answer 2

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

And work on CSS to adjust alignment.

Hope it is helpful.

Answer 3

You can add float property to your paragraph. Also close all your anchor tags. Symmetrically it's not correct.

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

FIDDLE

Answer 4

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

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

Answer 5

A few things:

• Be sure to close all of your anchor tags in the table, as you only close the first one.
• Consider putting your picture and table in a div, rather than ap tag, as divs are more traditionally used for grouping items together.

Now on to the positioning:

I'd recommend placing the image and table in one div and assign the float property to the image, which will keep the image and table together (as they're in a div) and should display them in line. 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;
}