CODEWITHSUNDEEP
htmlcss
Mia
Mia

Reputation: 6531

100% height for 'display: table'

I was doing the table method for vertical aligning the content. For some reason, in the condition I am going to link, it does not work. Here is the cssdeck link:

http://cssdeck.com/labs/ebke0fpw

As you can see, the height of the structure is completely dependent on the embedded Google font. I've tried making the .meta a table, and making the .metacon a table-cell to center things. However; then the height: 100% is not working any more.

I'm not sure about what's breaking the situation. Maybe you have the idea.

Upvotes: 1

Views: 101

Answers (2)

Daniel Apt
Daniel Apt

Reputation: 2638

The solution:

Give .title a height and you should be fine.

E.g. just add this line to the styling of .title

height: 150px;

Explanation

You are telling .meta to have a height of 100%.

Percentage based dimensions are based on the dimensions of the element's parent.

.meta's parent is .title, which has no height declared.

Upvotes: 0

user2360754
user2360754

Reputation: 59

The new code could be like this http://cssdeck.com/labs/lxymkq7t

use display:table-cell for inner elements and display:table for the holder. And use vertical-align: middle; to make aligned middle.

Upvotes: 1

Related Questions