Div hauteur n'est pas à ajuster en fonction du contenu
Comment centrer une div horizontalement et verticalement, et ajuster en hauteur pour s'adapter contenu?
Voici mon code html:
<div class="sprite">
</div>
<div class="content">
<span>close</span>
<div class="centered">
lorem lipsum.....
</div>
</div>
Et css:
.sprite{
position: fixed;
left: 0px;
top: 0px;
z-index: 20;
width: 100%;
height: 100%;
background-color: gray;
opacity: 0.6;
}
.content{
border:1px solid red;
z-index:21;
position: absolute;
margin:auto;
padding:10px;
left: 0px;
top: 0px;
bottom:0px;
right:0px;
height:30%;
width:30%;
text-align:center;
}
.content span{
position:absolute;
top:0px;
right:0px;}
.centered{
height:100%;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
C'est ce que je veux:
double possible de Comment obtenir un div pour redimensionner sa hauteur pour s'adapter à conteneur?
OriginalL'auteur POIR | 2013-11-28
Vous devez vous connecter pour publier un commentaire.
Modifier .contenu de la classe pour avoir la suite de css et de supprimer position absolue
OriginalL'auteur Pradip Borde
Dans votre
.content
classe, supprimerposition: absolute;
et ajouter
margin-top:24%;
pour l'aligner verticalement milieu tout en prenant de la hauteur du contenu
absolute
positionné attrib sont plutôt difficiles à coiffer!Violon : http://jsfiddle.net/logintomyk/Xxfhn/
MODIFIER
Ici, vous allez mate
CSS pour ammend :
Violon : http://jsfiddle.net/logintomyk/Xxfhn/2/
Astuce consistait à aligner une
absolute
<span>
dansrelative
content
classe....Malheureusement pas. La fermeture durée doit être dans le coin de la div avec la classe "contenu" et le sprite couvre le contenu de mon div.
ouais...il est devenu...crois-moi essayer! 🙂
Merci @Mayank! Je suis en attente pour la réponse 🙂
fait...vérifiez maintenant si cela fonctionne! 🙂
OriginalL'auteur NoobEditor
remplacer votre
css
avec le mien...n'est-ce pas u wanned.. ??
voir la photo ci-jointe dans le premier post.
OriginalL'auteur SRC SRC
est-ce que c'
OriginalL'auteur SRC SRC
Vous avez fait ce dur sur vous-même, il suffit de modifier la Position Relative dans le contenu de la classe, voir ci-dessous;
position: absolute;
pas relative.OriginalL'auteur CodingSince007