Vertical alignment using just 2 divs

Question

I have a container div and a content div. markup:

<div id="container">
<div id="content">
   <pre>
      some <br/>
      content <br/> of variable height.
   </pre>
</div>
</div>

css:

#container {display:table; border:solid red 2px; width:400px; height:500px; background-color:#aaa;}

#content {display:table-cell; height:200px; width:200px; vertical-align:middle; background-color:#444}

I want to vertically align the content div, but not have it take the complete height of the container div. Now I see other solutions for this, the ones that use 3 div's - outer, middle, inner- I don't want to do that- just 2 divs. While the above thing works- the height of the content div is ignored- possibly because of the table-cell display value, and it fills the entire container div. How to rectify this??

Your markup is not valid, there is no closing tag for the first div. And what is your problem, exactly? — Zack
What are you wanting to vertically align? The Text? The Div? In your example you don't have anything to vertically align things to. — Jamie Barker

Zack Zack · Accepted Answer · 2015-03-17T16:59:20

Remove the display:table-cell css from your #content id css selector, then the 200 height is respected. And you have a typo in your height: 200px width:200px there is no semi-colon separating the two values, so the width is not getting applied.

#container {
    display:table;
    border:solid red 2px;
    width:400px;
    height:500px;
    background-color:#aaa;
}
#content {
    /*display:table-cell;*/
    height:200px;
    width:200px;
    vertical-align:middle;
    background-color:#444
}

<div id="container">
    <div id="content"> <pre>
      some <br/>
      content <br/> of variable height.
   </pre>

    </div>
</div>

Vertical alignment using just 2 divs

1 Answers