CODEWITHSUNDEEP
htmlcss
user3550879
user3550879

Reputation: 3469

'display: inline block' trick not working in firefox

what I am trying to create is a full page website (no scrollbar) with a block of text/images/divs that centres both vertically and horizontally. I have researched and used a technique using a 100% height div with 0px width and then a content div to vertically centre content. Works perfect in safari, not at all in firefox (horizontal works in both browsers.) block of code used for this below...

html-

body

<div class="block">
  <div class="centered">
    ... content and images
  </div>
</div>

css-

html, body {height: 100%;}

.block {
background: url(images/bgimage.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; 
min-height: 100%;
margin: 0px;
}

.block:before {
content: '';
display: inline-block;
height: 100%; 
vertical-align: middle;
padding: 0px;
margin: 0px;
}

.centered {
display: inline-block;
vertical-align: middle;
padding:0px;
margin: 0px;
text-align: center;
*display:inline;
}

is there some equivalent to "display: inline-block" i can use for firefox? I can't use 'float:left' cause it won't vertically center the content div, and screws up the inline block statement.

All help welcome

Upvotes: 3

Views: 14151

Answers (2)

Oriol
Oriol

Reputation: 288130

This is a working code which centers both vertically and horizontally in compliant browsers:

Demo

html, body {
    height: 100%;
    margin: 0;
}
.block {
    height: 100%;
    text-align: center;
}
.block:after, .centered {
    display: inline-block;
    vertical-align: middle;
}
.block:after {
    content: '';
    height: 100%; 
}

Based on Centering in the unknown.

Upvotes: 0

negative0
negative0

Reputation: 459

Just add the css rule below to your elements with inline style, it should fix it:

display: -moz-inline-stack;

Upvotes: 3

Related Questions