Относительное позиционирование в Safari

Это должно быть просто, вот мой CSS:

.progressImage 
{
  position:relative;
  top:50%;
}

.progressPanel
{
height:100%;
width:100%;
text-align:center;
display:none;
}

<asp:Panel ID="pnlProgress" runat="server" CssClass="progressPanel">
<asp:Image ID="Image1" runat="server" CssClass="progressImage" ImageUrl="~/Images/Icons/loading.gif" />
</asp:Panel>

Я переключаю отображение панели в зависимости от действий пользователя.

Отлично работает в FireFox, но отображается вверху страницы в Safari.

p.s. "вертикальное выравнивание: посередине;" тоже не работает.

p.p.s. установка "позиция: относительная;" на панели не работает установка "position:relative;" на панели и "position:absolute;" на изображении разбивает его в FF и ничего не делает в Safari

ЭТО РАБОТАЛО:

.progressPanel
{
  height:100%;
  width:100%;
  position:relative;
}

.progressImage
{
  position:absolute;
  top:50%;
  left:50%;
}

css safari cross-browser positioning
person roman m    schedule 14.11.2008    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Установите положение .progressPanel в относительное, а положение .progressImage в абсолютное. Следующее работает для меня в FF, IE, Safari. Установите отрицательные поля на половину ширины/высоты изображения для идеального центрирования. Обратите внимание, что некоторым родителям progressPanel (телу в данном случае) нужна высота, чтобы progressPanel мог ее заполнить.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Test</title>
        <style type="text/css">
        body {
          height:700px;
        }
        .progressImage {
          position:absolute;
          top:50%;
          left:50%;
          margin-left:-16px;
          margin-top:-16px;
        }

        .progressPanel {
          position:relative;
          height:100%;
          width:100%;
          text-align:center;
          background:red;
        }
        </style>
    </head>
    <body>
    <div class="progressPanel"><img class="progressImage" src="pic.jpg"/></div>
    </body>
</html>
person Chris Marasti-Georg    schedule 14.11.2008

arrow_upward
1
arrow_downward

Убедитесь, что для родительского контейнера также установлено position: relative и указана высота, без него позиция не будет работать правильно.

.progressPanel
{
    height:100%;
    width:100%;
    text-align:center;
    display:none;
    position: relative;
}

в качестве альтернативы, почему бы не установить свойство фона панели на свой gif?

background: url('path/to/image.gif') no-repeat center middle;

Это всегда будет в центре.

person Mauro    schedule 14.11.2008

arrow_upward
1
arrow_downward

Спецификация позиции (относительная или абсолютная) должна быть в обоих элементах (родительском и дочернем), иначе позиционирование дочернего элемента не обязательно будет работать. Вы всегда должны использовать относительное позиционирование для элемента, если вы не укажете точное положение, например, left: 100px; верх: 100px. Вертикальное выравнивание относится к самому элементу и касается только положения в текстовой строке. Line-height не совпадает с высотой div, если вы ее не измените. Высота строки должна быть указана больше, чем элементы внутри, чтобы выравнивание по вертикали вступило в силу.

person micaro    schedule 18.07.2014