CODEWITHSUNDEEP
htmlcssvertical-alignment
valen
valen

Reputation: 845

Vertically aligning table within container div

I'm trying to align a table of dynamic size within a parent div. The parent container's height is set, and the inner table's height is unknown (variable). I don't think margins/relative positioning adjustments will work since the size of the table is unknown. Can this be done? Right now the code looks like:

html:

<div id="wrapper">
 <div id="board">
      <table id="evolve">...</table>
 </div> 
</div>

css:

#wrapper {
    width: 100%; 
    height: 100%; 
}
#board {
    position: relative;
    margin: auto; 
    width: 265px; 
    height: 222px; 
    text-align: center;
    vertical-align: middle;
    border: 1px solid black;
}
.evolve {
    border: 1px black solid;
    margin: auto;
    position: relative;
}

Upvotes: 2

Views: 2541

Answers (2)

user1432124
user1432124

Reputation:

Your desired css code

#board {
    display:table-cell;
    width: 265px; 
    height: 222px; 
    text-align: center;
    vertical-align: middle;
    border: 1px solid black;
}
.evolve {
    border:solid 1px black;
        }

UPDATE You will need to alter padding-left depending on wrapper width(if you set it to 100% then it will work)

#wrapper {
    height: 100%;
    padding-left:36%;
}
#board {
    display:table-cell;
    width: 265px; 
    height: 222px; 
    vertical-align: middle;
    border: 1px solid black;
}
.evolve {
    border: 1px black solid;
   }

As soon as i find a better solution i will update it

Upvotes: 1

sandeep
sandeep

Reputation: 92793

You can define line-height same as the height of the DIV. Write like this:

#board {
    position: relative;
    margin: auto;
    width: 265px;
    height: 222px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid black;
    line-height:222px;
}
#board .evolve {
    border: 1px black solid;
    margin: auto;
    position: relative;
    line-height:1.5;
}

Check this http://jsfiddle.net/X4L5A/1/

Upvotes: 0

Related Questions