вертикальное центрирование не работает в firefox

У меня есть следующий код, который создает пустой div img-cell с высотой и фоновым изображением. И 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;
 }

это помещает элемент div «текстовая ячейка» вертикально по центру элемента «ячейка изображения». Он работает только в Safari, но не в Firefox или других браузерах. Это связано с отображением: таблица. Я не хочу использовать таблицы, но я не могу понять, как вертикально центрировать «текстовую ячейку»

РЕДАКТИРОВАТЬ. У меня есть позиция «текстовая ячейка»: относительная на экранах мобильных устройств, поэтому она идет ниже div «img-cell».


javascript html jquery css absolute
person user3550879    schedule 08.05.2015    source источник
comment
я попробовал это, так как решил, что это самый простой ответ, но он не работает   -  person user3550879    schedule 08.05.2015
comment
Должно быть - vertical-align:middle;.   -  person Prasanga    schedule 08.05.2015
comment
потому что вы отдали top:0 text-cell. Проверьте jsfiddle.net/1L7yora9/1.   -  person ketan    schedule 08.05.2015
comment
ваша скрипка не центрируется должным образом. На всех форумах, которые я проверил, нужны как top: 0; и внизу: 0; с дисплеем:стол. просто с фаерфоксом не работает   -  person user3550879    schedule 08.05.2015
comment
Он центрирует верхнюю часть div, а не центрирует div, как это происходит с display:table   -  person user3550879    schedule 08.05.2015

Ответы (2)


arrow_upward
0
arrow_downward

Другой подход, чтобы попытаться решить вашу проблему, тот же 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;
 }

Скрипт: http://jsbin.com/tumofitera/1/edit?html,css,output

person Frinsh    schedule 08.05.2015
comment
Меня беспокоит фиксированная высота текстовой ячейки. Это адаптивный сайт, поэтому у меня нет полного контроля над контентом. Я упомянул в другом комментарии, что использовал top:30%, чтобы имитировать центрирование, но когда текст начинает занимать 2+ строки, он больше не выглядит центрированным. - person user3550879; 08.05.2015
comment
Вам не нужно устанавливать фиксированную высоту в текстовой ячейке. Он должен разобраться автоматически без него :) - person Frinsh; 08.05.2015
comment
Он работает в firefox и т. д., но делает то же самое, что я уже упоминал, центрируя верхнюю часть div в Safari. Я ищу кросс-браузерный ответ - person user3550879; 08.05.2015
comment
@ user3550879 О, конечно. Добавление правильных префиксов для этого также важно для Safari. Обновление моего ответа - person Frinsh; 08.05.2015

arrow_upward
0
arrow_downward

Вы можете попробовать это:

Будет центрироваться по вертикали .text-cell

Чтобы центрировать <H1> и <h3> по вертикали, удалите 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

 }

ДЕМО ЗДЕСЬ

person Luís P. A.    schedule 08.05.2015
comment
ваша скрипка, кажется, не работает так, как вы говорите. Мне просто нужно центрировать div "text-cell", так как все заголовки в нем - person user3550879; 08.05.2015
comment
центрировать относительно чего? - person madalinivascu; 08.05.2015
comment
Я перестраиваю демонстрацию... и теперь у вас есть центр по вертикали и горизонтали... теперь настраивайте под свои нужды - person Luís P. A.; 08.05.2015
comment
Мне просто нужно, чтобы он был вертикально центрирован, они не будут горизонтально центрированы. Я хочу, чтобы он был центрирован относительно div img-cell. Он имеет установленную высоту 375px. Я могу использовать top:30%, потому что это сделает div центрированным, но когда текст начинает занимать 2+ строки, он больше не центрируется (не отвечает) - person user3550879; 08.05.2015
comment
ваша демонстрация делает именно то, что происходит со мной, вертикально центрируя TOP div, а не центрируя div - person user3550879; 08.05.2015
comment
Вы должны изменить html .. я перестроить мою демонстрацию ... наконец, закройте свое изображение div - person Luís P. A.; 08.05.2015
comment
Он все еще делает то, что я упомянул. Я забыл упомянуть, что на экранах мобильных размеров «текстовая ячейка» является position:relative и помещается ниже «img-cell», поэтому я не могу закрыть div вне img-cell. - person user3550879; 08.05.2015