Relative Positionierung in Safari

Einfach muss es sein, hier mein 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>

Ich Umschalten-panel-display-je nach Aktion des Benutzers.

Funktioniert Super im FireFox, aber zeigt sich am oberen Rand der Seite in Safari.

p.s. "vertical-align:middle;" funktioniert auch nicht.

p.p.s. Einstellung "position:relative;" auf dem Bedienfeld funktioniert nicht, die Einstellung "position:relative;" auf das panel und "position:absolute;" auf das Bild bricht es in FF und hat nichts in Safari

DIESER ARBEITETE:

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

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

InformationsquelleAutor roman m | 2008-11-14

  1. 3

    Legen Sie die position der .progressPanel um relative, und die position der .progressImage absoluten. Das folgende funktioniert bei mir im FF, IE, Safari. Legen Sie die negative Ränder um die Hälfte der Breite/Höhe des Bildes für perfekte Zentrierung. Beachten Sie, dass einige Eltern der progressPanel (Körper, in diesem Fall) muss eine Höhe, so dass die progressPanel füllen kann.

    <!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>

    InformationsquelleAutor Chris Marasti-Georg

  2. 0

    Sorgen der Eltern-container ist auch auf position: relative und hat eine Höhe angegeben, ohne dass es die position wird nicht richtig funktionieren.

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

    alternativ, warum nicht die background-Eigenschaft des Panels, um Ihre gif?

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

    Wird immer zentriert sein.

    funktioniert nicht in Safari

    InformationsquelleAutor Mauro

  3. 0

    Position Spezifikation (relative oder absolute) sollte in beiden Elementen (Eltern und Kind), da sonst die Positionierung der untergeordneten Elemente, die nicht unbedingt arbeiten. Du solltest immer relative Positionierung für ein element es sei denn, Sie geben Sie die genaue position wie left: 100px; top: 100px. Vertical-align bezieht sich auf das element selbst und betrifft nur die position in der text-Zeile. Line-height ist nicht das gleiche wie div-Höhe, es sei denn, Sie ändern es. Line-height müssen angegeben werden, die größer als Elemente in um get vertical-align wirksam.

    InformationsquelleAutor micaro

Schreibe einen Kommentar