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

Она должна быть простой, вот мой CSS:Относительное позиционирование в Safari

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

ЭТИ РАБОТАЛ:

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

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

источник

2008-11-14 roman m

Установите положение .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>

источник

2008-11-14 20:26:00

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

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

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

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

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

источник

2008-11-14 20:13:18 Mauro

не работает в Safari – 2008-11-14 20:18:48

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

источник

2014-07-18 04:35:30 micaro

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

ответ

Смежные вопросы