Only Firefox ignoring 100% height with display: table-cell
Take all the height declarations off: an item set to display: table-cell
as a child of some element set to display: table
should always be 100% height of its parent.
You also have display: block
and display: table-cell
on the same element. Even though the display: table-cell
will take precedence (because it's last), you should try and keep your code clean.
The code below works in Firefox for me:
HTML:
<div>
<a href="#">test</a>
</div>
CSS:
div { display: table; height: 100px; border: 4px solid #000; width: 300px;}
a { display: table-cell; border: 4px solid #0f0; vertical-align: middle; text-align: center; }
Admin
Updated on June 16, 2022Comments
-
Admin almost 2 years
I'm trying to vertically center an element by setting its parent to
display: table
and then the element todisplay: table-cell; vertical-align: middle;
. I'm also setting the height of the element to34%
and its parent to100%
so it fills the screen.This is working perfectly well on every browser (including IE 8+) but Firefox. Firefox just ignores the height and collapses to the height of the span element.
Why would this be happening?
CSS
#homeNav ul { padding: 0; margin: 0; height: 100%; } #homeNav li { height: 34%; display: table; width: 100%; } #homeNav li a { min-height: 177px; height: 100%; line-height: 100%; display: block; text-decoration: none; font-size: 48px; border-bottom: 1px solid #fff; display: table-cell; vertical-align: middle; } #homeNav li a.last { border-bottom: none; } #homeNav li a:hover, #homeNav li a.active { background: none; } #homeNav li a span { padding: 50px 0 50px 100px; display: block; background: url(../images/main-nav-hover_bg-large.png) no-repeat; background-position: 120px 50px; padding-left: 160px; }
-
Zach Lysobey almost 10 yearsupvoted to counter-act downvote. This answer seems to work, addresses OP's question, and is quite reasonable.