Wie man ein div auf oben in der Mitte position einer Seite mit CSS?

Ich bin nicht in der Lage, ein div an der oberen Mitte der Seite. Ich bin mit CSS, aber nichts funktioniert hier.

CSS:

#loader {
  position: relative;
  margin: 0 auto;
  text-align: left;
  clear: left;
  height: auto;
  z-index: 0;
}

HTML:

<body>
  <div id="loader" style='display: none'><img src='img/basic/loader4.gif' /></div>
</body>

Hatte ich schon 2 Stunden auf diese aber noch nicht in der Lage, um es herauszufinden.

InformationsquelleAutor vips | 2012-06-27
  1. 2

    Entfernen Sie zuerst display:none; aus deinen div mit der id=loader & hinzufügen text-align:center; es

    #loader{  
    position:relative;
    margin:0 auto;
    clear:left;
    height:auto;
    z-index: 0;
    text-align:center;/* Add This*/
}​

    Arbeiten demo: http://jsfiddle.net/surendraVsingh/FCEhD/

    InformationsquelleAutor SVS
  2. 2

    Müssen Sie angeben width Eigenschaft, wenn Sie verwenden möchten margin: 0 auto;.

    Wenn Sie nicht wissen, Breite einfach hinzufügen display: table Eigenschaft und es funktioniert.

    #out {
   display: table;
   margin: 0 auto;
}
    • Vielen Dank Ihr jetzt arbeiten.....
    InformationsquelleAutor Simon Dorociak
  3. 1

    Müssen Sie eine bestimmte Breite für das div, sonst wird es für alle verfügbar, und die margin hat keine Wirkung. Beispiel:

    #loader{  
  margin: 0 auto;
  width: 200px;
}
    InformationsquelleAutor Guffa
  4. 0
    #loader{  
   margin: 0px auto;
   width: 100px;
}
    InformationsquelleAutor slash197
  5. 0
    #loader
{
    position: absolute;
    width: xxpx;
    height: xxpx;
    margin:0px auto ;

}

    oder-u verwenden können,

    margin-left:xx;  and `margin-top:0px;`
    InformationsquelleAutor Prashobh
  6. 0

    <div id="loader" style='display: none' align="center">

    drücken Sie Strg+Leertaste, bin mir nicht sicher über die syntax
    und in css margin und padding hat 0

    InformationsquelleAutor Amith
  7. 0
    #loader{display:none;clear:both;margin:0px auto;width:[a number]px;}

    sollten Sie natürlich beachten, dass der browser-cache. löschen den cache Ihres Browsers und wiederholen Sie die Prüfung

    InformationsquelleAutor hamed aj
  8. 0

    Im obigen Beispiel ist jeder, vorausgesetzt er will, dass die 'volle Breite'.

    Diese Werke in eine absolute volle Breite /Höhe des übergeordneten Containers aber Einschränkungen, die Breite automatisch nur auf die content-Breite

    Übergeordneten Container

    display: block; 
position: absolute;
clear: both;
width: 100%;
height: 100%;
border: solid thin red;

    Untergeordneten Container

    display: block;
position: absolute;
top:0;
transform: translateX(50%);
padding-left:.5em;
padding-right:.5em;
margin-left:auto;
margin-right:auto;
right:50%;
    InformationsquelleAutor Jay Lepore
Schreibe einen Kommentar