Relative positioning in Safari

2019-07-19 07:48发布

站内问答 / HTML/CSS
547 3 5

It has to be simple, here's my 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>

I toggle panel display depending on user action.

Works great in FireFox, but shows up at the top of the page in Safari.

p.s. "vertical-align:middle;" doesn't work either.

p.p.s. setting "position:relative;" on the panel doesn't work, setting "position:relative;" on the panel and "position:absolute;" on the image breaks it in FF and does nothing in Safari

THIS WORKED:

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

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

3条回答
甜甜的少女心
2楼-- · 2019-07-19 08:29

Position specification (relative or absolute) should be in both elements (parent and child) otherwise the positioning of child element doesn't necessarily work. You should always use relative positioning for an element unless you specify the exact position like left: 100px; top: 100px. Vertical-align refers to the element itself and concerns only the position in text line. Line-height is not the same as div height unless you change it. Line-height must be specified larger than elements inside in order to get vertical-align take effect.

查看更多
0人赞 添加讨论(0) 举报
smile是对你的礼貌
3楼-- · 2019-07-19 08:35

Set the position of .progressPanel to relative, and the position of .progressImage to absolute. The following works for me in FF, IE, Safari. Set the negative margins to half the width/height of your image for perfect centering. Note that some parent of the progressPanel (body in this case) needs a height so that the progressPanel can fill it.

<!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人赞 添加讨论(0) 举报
beautiful°
4楼-- · 2019-07-19 08:38

Ensure the parents container is also set to position: relative and has a height specified, without it the position wont work correctly.

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

alternatively, why not set the background property of the panel to your gif?

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

That will always be centered.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)