абсолютное позиционирование в относительном div firefox

#html #css #positioning #css-position

#HTML #css #позиционирование #css-позиция

Вопрос:

У меня возникли проблемы с абсолютным позиционированием изображения в относительном расположении div. Изображение должно быть центрировано внутри div. Для этого я использую следующий css

 div
{
  position: relative;
  top: 0px;
  left: 0px;
}
div img 
{
  margin-top: -10px; /*img width is 20px*/
  position: absolute;
  top: 50%;
}

Это отлично работает во всех браузерах, кроме Firefox.
Есть ли какое-либо обходное решение для этого? Потому что я уже много искал это, и я не могу что-то понять.

PS: Не говорите мне использовать высоту строки. Потому что рядом с изображением также есть текст. Так что этот вариант не будет работать для меня.

Ответ №1:

Для изображения, которое вы говорите top: 50% . 50% от чего? Оно должно составлять 50% от родительского элемента. На что установлен родительский элемент? Если для него ничего не установлено, в этом и заключается проблема.

1. О чем ты говоришь? 50% от родительского элемента, который является div!

2. @McTrafik — Да, но для этого div ничего не установлено. Итак, нет ссылки на 50% и, следовательно, вопрос, 50% от чего?

Ответ №2:

почему бы не сделать что-то вроде этого

 div
{
  position: relative;
  top: 0;
  left: 0;
}
div img
{
  position: relative;
  top:25%;
  left:50%;
}

relative Для изображения означает 25% сверху div и 50% для левой стороны.

1. Я пробовал это, но top: 25% ничего не делает. левый работает, но мне нужно особое позиционирование сверху

2. Попробуйте указать div определенную высоту. Т.Е. Размер изображения отступ / поле должен работать

Ответ №3:

Попробуйте поместить его в качестве фонового изображения, если вы просто хотите, чтобы изображение было там.

 div
    {
      background-image: url('image.jpg');
      background-position: center;
      background-repeat: no-repeat;
      margin: 0px auto;
      position: relative;
      width: Xpx;
      height: Xpx;
      top: 0px;
      left: 0px;
      vertical-align: middle;
    }

а для текста используйте div внутри и позиционируйте его, используя поля, отступы или что-то еще.

Ответ №4:

Как насчет автоматических полей:

 div img 
{
  margin-top: -10px; /*img with is 20px*/
  display: block;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

Это работает для меня в firefox 7

1. Для этого вам понадобятся display: block и position: absolute, но автоматические поля хороши для центрирования.

2. горизонтальное поле будет работать. Но мне нужно выровнять изображение по вертикали

3. Возможно, я неправильно понял, но для выравнивания изображения по вертикали вы можете использовать ‘margin-top: 25%;’ в дополнение к вышесказанному. Но вам придется установить номер вручную — авто, похоже, не работает.

Ответ №5:

Это хорошая статья на эту тему из CSS-Tricks:

http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/

Ответ №6:

Протестируйте это:

 div {
    position: relative;
    top: 0px;
    left: 0px;
    background: red;
    width:500px;
}
div img {
    margin-top: -10px; 
    //position: absolute; /*get it out*/
    display: block; /*Important*/
    margin: auto; /*Important*/
    top: 50%;
}