Search code examples
htmlcssalignmentcss-tables

Table Alignment with Div

I needed some help with table alignment. I haven't coded for a while, and can't figure out what I am doing wrong here. I have these divs setup, and a table in one, but for some reason the table does not align to the middle. It just aligns with the left side of the table, and the rest leads off to the right. Here is my code:

<div id="SlideShow_Wrapper" align="center">
    <div id="SlideShow_Background" align="center">
        <div align="center" id="SlideShow">
            <table border="1" align="center" >
                <tr align="center">
                    <td style="padding-right:15px;"><img src="LeftArrow.png"  /></td>
                    <td><img id="SlideShow_Picture" src="Ore_Background.png"  /></td>
                    <td style="padding-left:15px;"><img src="RightArrow.png"  /></td>
                </tr>
            </table>
        </div>
    </div>
</div>

And here is my css:

#SlideShow {
    margin:0px auto;
}
#SlideShow_Background {
    background-image:url(Stone.png);
    border-radius:10px;
    width:820px;
    height:420px;
}
#SlideShow_Wrapper {
    padding-top:50px;
}

I tried some things out, and when I remove the SlideShow_Background, the table aligns as normally, but when I add it back in, the table just aligns to the right. Any help would be nice

EDIT:
I want the table to be centered, not off to the right. This jsFiddle shows it, but without the content, but you can see what I mean.
And this next link is how I want it to be, jsfiddle.net/fuECu see how it's centered, But I cant find a way to do that without taking off the SlideShowbackground div.

Solution

  • Your table is centered already. The SlideShow_Background division just create a horizontal scroll bar on small screens. But still if you scroll the bar to the middle, you will see that table is on the center.

    Still if you want the table to be centered, you don't have to remove the SlideShow_Background. Just remove the height and width attribute of the div. And it will be set to auto.

    #SlideShow_Background{
background-image:url(Stone.png);
border-radius:10px;
}

    Fiddle