'显示:内联阻止'技巧在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屋!