CODEWITHSUNDEEP
cssvertical-alignment
Kristian Rafteseth
Kristian Rafteseth

Reputation: 2032

vertical align headache

Im having trouble vertical aligning 2 divs inside a 100% height div. I googled but failed solving.

pseudocode:

<div container, fixed height>
  <img, dynamic height/>
  <div inner, 100% height>
    <div><img/></div>
    <div><img/></div>
 </div>
</div>

The two divs in the inner div, i want them to be in the vertical center of the inner div, but i cant find a way. its not possible to know the height of the inner div, its just set to 100% because of the random height of the image above it. The divs inside the inner div will also have dynamic heights.

2 hours of fiddling around gave no results, so im coming here.

The page where you can see it in action: http://pyntmeg.no/?iframe

Upvotes: 0

Views: 233

Answers (4)

Jeremy Miller
Jeremy Miller

Reputation: 383

vertical-align is meant for table elements, not regular divs, etc. In order to get vertical-align middle to work, the element needs to be set to display:table-cell and it's parent needs to be set to display:table-row

Be careful with that, though, because it really does change the way the element interacts with it's sibling elements, and it could definitely change how your page is laid out.

The best use of this would be something like this:

<div class="table-row">
    <div class="td">lorem ipsum</div>
    <div class="td">dolor sit amat</div>
</div>

Css:

.table-row {display: table-row}
.td {display: table-cell; vertical-align: middle;}

NOTE

This will not work with elements that are floated left/right, and it will change how the border width effects the overall width of the element.

I would only use this with tabular data, much like I would suggest only using a table.

Upvotes: 0

Bear In Hat
Bear In Hat

Reputation: 1886

As long as the parent/grandparent divs have the width to work with it you can apply 'float: left' to the grandchild divs style.

Upvotes: 0

Ibu
Ibu

Reputation: 43810

You can give the parent DIV.container a position :relative property since it has a fixed height.

The inner div can then have a position:absolute and you set its height to 100% or maybe a little lower. you can use the top property to move it around.

Upvotes: 1

Kevin Bowersox
Kevin Bowersox

Reputation: 94429

Try:

.item {
    position: relative;
    top: 10%;
}

You may need to adjust top: 10%;

Upvotes: 0

Related Questions