垂直居中不在firefox中工作

I have the following code which creates an 'img-cell'div which is empty with a height and background-image. And a 'text-cell' div underneath. (both 100% width) (php code removed, it doesn't affect the layout)

我有以下代码创建一个'img-cell'div,它是空的,有高度和背景图像。下面是一个'文本单元'div。 (均为100%宽度)(删除php代码,不影响布局)

HTML

<article>
 <div class="img-cell">
 </div>

  <div class="text-cell">
   <div class="extra-css" >
      <h1>Title</h1>
      <h3>Category</h3>
   </div>
 </div>  
</article>

CSS

 article {
   position: relative;
   margin: 0; 
   padding: 0;
 }

.img-cell { 
  position: relative;
  height: 375px;
  width: auto;
  padding: 0;
  margin: 0;
  border-top: 1px solid #000;
  background-size: cover;
  background-repeat: no-repeat; 
}

 .text-cell {
   position: absolute;
   z-index: 10;
   padding: 15px 0;
   width: 100%;
   margin: auto;
   top: 0;
   bottom: 0;
   display:table;
 }

this puts the 'text-cell' div vertically centred over 'image-cell' div. It only works in Safari, but not in Firefox or the other browsers. It has to do with display:table. I don't want to use tables but I can't figure out how how to vertically center 'text-cell'

这将'text-cell'div垂直居中于'image-cell'div上。它仅适用于Safari,但不适用于Firefox或其他浏览器。它与display:table有关。我不想使用表但我无法弄清楚如何垂直居中'text-cell'

EDIT - I have the 'text-cell' position:relative on mobile size screens so it goes below the 'img-cell' div

编辑 - 我有'文本单元'位置:相对于移动大小的屏幕,所以它低于'img-cell'div

2 个解决方案

#1

An other approach to try to solve your issue, same HTML but slightly different CSS:

尝试解决您的问题的另一种方法,相同的HTML但略有不同的CSS:

 article {
   position: relative;
 }

.img-cell {
  height: 375px; 
}

 .text-cell {
   position: absolute;
   top: 50%;
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
   left: 0;
   right: 0;
 }

Fiddle: http://jsbin.com/tumofitera/1/edit?html,css,output

#2

You can try this:

你可以试试这个:

Will center vertical .text-cell

将中心垂直.text-cell

To center vertical the <H1> and <h3>, remove the padding

要使

和

垂直居中,请删除填充

HTML

<article>
 <div class="img-cell">
  <div class="text-cell">
   <div class="extra-css" >
      <h1>Title</h1>
      <h3>Category</h3>
   </div>
 </div> 
</div>
</article>

CSS

 article {
   position: relative;
   margin: 0; 
   padding: 0;
 }

.img-cell { 
  position: relative;
  height: 375px;
  width: auto;
  padding: 0;
  margin: 0;
  border-top: 1px solid #000;
  background-size: cover;
  background-repeat: no-repeat; 
}

 .text-cell {
   position: absolute;
   z-index: 10;
   padding: 15px 0;
   width: 100%;
   margin: auto;
   top: 0;
   bottom: 0;
   display:table;
    top: 50%; //add this
    display: inline-block; //add this
    transform: translateY(-50%); //add this
    background: #f1f1f1;
    display: inline-block; //add this
    vertical-align: middle; //add this

 }

DEMO HERE