Question

我想要创建的是一个整页网站（没有滚动条），其中包含一个垂直和水平居中的文本/图像/ div块。我研究并使用了一种技术，使用100％高度div，宽度为0px，然后使用内容div来垂直居中。在safari中完美运行，在firefox中完全没有（在两个浏览器中都是水平的。）下面使用的代码块...

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;
}

是否有一些相当于“display：inline-block”我可以用于firefox？我不能使用'float：left'因为它不会垂直居中内容div，并搞砸了内联块语句。

欢迎所有帮助

干杯

Answer 1

只需将下面的css规则添加到具有内联样式的元素中，它应该修复它：

display: -moz-inline-stack;

Answer 2

这是一个在兼容浏览器中纵向和横向居中的工作代码：

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%; 
}

基于Centering in the unknown。

'display：inline block'技巧在firefox中不起作用

2 个答案: