'显示:内联阻止'技巧在Firefox中不起作用 [英] 'display: inline block' trick not working in firefox

问题描述

我要创建的是一个整页网站(无滚动条)，其中包含文本/图像/divs块，这些块在垂直和水平方向上都居中.我研究并使用了一种技术，该技术使用高度为100％的div(宽度为0px)，然后使用内容div垂直居中放置内容.在Safari中完美运行，而在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;
}

我可以在Firefox中使用相当于"display:inline-block"的内容吗?我不能使用"float:left"，因为它不会使内容div垂直居中，并且会破坏内联语句.

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.

欢迎所有帮助

• 干杯

推荐答案

只需将以下css规则添加到具有内联样式的元素中，它便可以解决该问题:

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

display: -moz-inline-stack;

这篇关于'显示:内联阻止'技巧在Firefox中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！