Показать: проблема с ячейками таблицы в Firefox

Question

Показать: проблема с ячейками таблицы в Firefox

0

У меня есть div с H1 и абзацем внутри него. Задача состоит в том, чтобы центрировать абзац вертикально.

<div id="id1">
<h1>Header</h1>
<p>paragraph</p>
</div>

Я использую:

#id1
{
position: relative;
width: 250px;
height: 250px;
border-radius: 125px;
background: #000;
color: #f00;
}
#id1 h1
{
position: relative;
margin: 0;
padding: 0;
text-align: center;
top: -50px;
}
#id1 p
{
position: relative;
display: table-cell;
vertical-align: middle;
top: -37px;
margin: 0;
padding: 0;
text-align: center;
height: 250px;
width: 250px;
border-radius: 125px;
background: #fff;
color: #000;
}

Он работает в большинстве новых браузеров (даже IE8), но не в FF. Я думаю, проблема связана с относительным положением H1 и P. Но не уверен. Помоги мне, пожалуйста!

Скрипка

DruDro 02 дек. 2013, в 23:42

Источник

0

Не могли бы вы добавить небольшой эскиз-изображение, как оно должно выглядеть? Я действительно не вижу, в каком вертикальном пространстве вы хотите центрировать абзац. просто текст внутри абзаца внутри себя? это работает в моем FF ...
Ria Weyprecht 02 дек. 2013, в 22:50

Теги:

html

css

2 ответа

2

Ваш тег h1 содержит текст, а FF добавляет высоту текста в заголовок. Попробуйте удалить текст, см. [Здесь] [http://jsfiddle.net/G3av6/3/]

AlecTMH 02 дек. 2013, в 21:14

Ещё вопросы

Не могли бы вы добавить небольшой эскиз-изображение, как оно должно выглядеть? Я действительно не вижу, в каком вертикальном пространстве вы хотите центрировать абзац. просто текст внутри абзаца внутри себя? это работает в моем FF ...

davidpauljunior · Accepted Answer · 2013-12-02T21-38-00.000Z

Если вы сделаете h1 абсолютно позиционированным, а затем удалите относительное позиционирование из p он, похоже, работает нормально. Дайте ширину h1 100%, чтобы текст снова центрировался.

#id1 {
  position: relative;
  width: 250px;
  height: 250px;
  border-radius: 125px;
  background: #000;
  color: #f00;
}
#id1 h1 {
  position: absolute;
  margin: 0;
  padding: 0;
  text-align: center;
  top: -50px;
  width: 100%;
}
#id1 p {
  display: table-cell;
  vertical-align: middle;
  top: -37px;
  margin: 0;
  padding: 0;
  text-align: center;
  height: 250px;
  width: 250px;
  border-radius: 125px;
  background: #fff;
  color: #000;
}

http://jsfiddle.net/G3av6/6/

Огромное спасибо! Я думал, что все перепробовал ...