La superposition centré/alignés verticalement message

Je voudrais faire une incrustation sur mon site pour empêcher l'utilisateur de cliquer quelque part. C'est parfois très pratique. Dans le milieu de la superposition de je veux passer un message du genre "veuillez patienter.." ou "chargement...".

J'ai fait un div, qui couvre la totalité de l'écran et de l'intervalle à l'intérieur de lui, qui contient le message. J'ai réussi à centre de la span à l'intérieur de la div horizontalement, mais j'ai du mal avec l'alignement vertical d'elle. Le message doit être aussi centrée verticalement.

Voici mon code pour l'instant:

HTML:

<div id="overlay">
    <span>Please wait...</span>
</div>

CSS:

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: #000;
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
}

#overlay span {
    padding: 5px;
    border-radius: 5px;
    color: #000;
    background-color: #fff;
}

Ici est la jsfiddle.

Alors, comment puis-je obtenir la durée avec le message centrée verticalement?

InformationsquelleAutor Alexxus | 2013-08-30
  1. 3

    Comme ce

    DÉMO

    ajouter ci-dessous, sélectionnez dans position:relative ou top:50%;

    CSS

    #overlay span {
    padding: 5px;
    border-radius: 5px;
    color: #000;
    background-color: #fff;
    position:relative;
    top:50%;
}
    • J'ai déjà essayé le top: 50%; sur le span, mais j'ai oublié le position: relative;. Doh! 🙂 Merci beaucoup pour votre aide!
    • Je sais, mais je ne pouvais pas. Vous devez attendre 5 minutes avant d'accepter une réponse :-/
    • merci et bienvenue
    InformationsquelleAutor Falguni Panchal
  2. 0

    D'ailleurs que si le Centre de l'objet est plus grand dans hauteur & largeur, vous pouvez donner des marges négatives exactement la moitié de la même chose.

      #overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: #000;enter code here
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
}

#overlay span {
    padding: 5px;
    border-radius: 5px;
    color: #000;
    background-color: #fff;
    height:100px;
    width:100px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-50px;
    margin-top:-50px;
    display:block;
}
    • Théoriquement, vous avez raison, mais un span est un élément inline. Vous ne pouvez pas définir les dimensions sur elle
    • oui, je voulait juste dire "au cas où" il y a un à l'intérieur de l'élément avec la plus grande hauteur & largeur - alors c'est la solution
    • Mais ton code ne fonctionnera pas. À vous de les corriger. Vous ne pouvez pas définir de width ou height sur un élément span.
    • oui juste en ajoutant 'display:block" je peux faire un "élément inline" look like "en bloc" de niveau élément
    InformationsquelleAutor Suraj Naik