I'm trying to vertically center an element by setting its parent to display: table
and then the element to display: table-cell; vertical-align: middle;
. I'm also setting the height of the element to 34%
and its parent to 100%
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;
}
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:
<div>
<a href="#">test</a>
</div>
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; }
Demo on JS Fiddle.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With