CODEWITHSUNDEEP
htmlcsshtml-tablevertical-alignment
frequent
frequent

Reputation: 28493

How to vertical align a table inside a div

I have a background div with set dimensions, which includes a table element.

I'm looking for a way to position the table in the middle-left of the div. Left is easy, middle I can't get to work. This is what I have:

HTML

 <div id="background">
      <table>
        //... stuff 
      </table>
 </div>

CSS:

 #background {
      height: 1000px;
      width: 1000px;
      text-align: left;
      }

Can someone tell me how to vertical align the table?

Upvotes: 1

Views: 22749

Answers (3)

TristanD27
TristanD27

Reputation: 89

Using top: 50% will not put it in the middle, you would have to use calc but that would require a fixed height and this never seems to work for me using top: for future reference though, if you want to align horizontally then use this example:

width: 300px;
left: calc (50% - 150PX)

The - 150px is equivalent to half of the width.

Upvotes: 1

xotix
xotix

Reputation: 520

Just position: relative the table within the div and give it top: 50% and left: 50%.

You can take out the left and just use top

http://jsfiddle.net/EZk3T/1/

Upvotes: 3

Tyler
Tyler

Reputation: 3813

Div's don't allow vertical aligns typically. The only option would be to make it act like a table cell or do something like margin/padding that will look like your table is vertically aligned.

Upvotes: 3

Related Questions