Относительное позиционирование в Safari - PullRequest
Новая
       27

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

2 голосов
/ 14 ноября 2008

Это должно быть просто, вот мой 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. настройка «позиция: относительная;» на панели не работает, настройка «позиция: относительная»; на панели и «позиция: абсолютная;» на изображении разбивает его в FF и ничего не делает в Safari

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

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

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

Ответы [ 3 ]

3 голосов
/ 14 ноября 2008

Установите положение .progressPanel на относительное, а положение .progressImage на абсолютное. Следующее работает для меня в FF, IE, Safari. Установите отрицательные поля равными половине ширины / высоты вашего изображения для идеального центрирования. Обратите внимание, что некоторый родительский элемент progressPanel (в данном случае body) нуждается в высоте, чтобы ее можно было заполнить 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>
0 голосов
/ 18 июля 2014

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

0 голосов
/ 14 ноября 2008

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

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

в качестве альтернативы, почему бы не установить свойство background панели для вашего gif? 

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

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

...