dynamiquement centre de div sur une autre div
Je suis à la recherche pour centrer une div sans une largeur fixe sur une vidéo donc, si la fenêtre est redimensionnée, la div se réduira avec elle, mais restent dans le centre. À l'heure actuelle, j'ai est proche de la corriger à l'aide de la gauche:50% avec la moitié de la marge négative. Le problème est évidemment qu'il se déplace de gauche que la marge négative est fixe. Des idées? Merci!
Mon code HTML:
<div id = 'top-container'>
<video id='top-vid' autoplay loop width=100% height='auto' class='no-mobile'>
<source src='DS_Intro.mov' type='video/mp4'>
<source src='test.webm' type='video/webm'>
</video>
<div id = 'top-content'>
<div id = 'top-text'>
<div id = 'top-img'>
<img src='ds_white.png' width = "100%" height = 'auto'>
</div>
<h1 id = 'top-slogan'>a boutique video production studio</h1>
</div>
</div>
</div>
Mon CSS:
#top-container{
width:100%;
height:100%;
}
#top-content{
max-width:1200px;
margin-right:auto;
margin-left:auto;
}
#top-img{
width:100%;
padding-bottom: 10%;
}
#top-slogan{
text-align:center;
padding-bottom:10%;
font-weight: 100;
color:#5DBCD2;
}
#top-text {
top: 50%;
left: 50%;
margin-left: -360px;
position:absolute;
width:50%;
}
Ici est la VIOLON
Essayez
margin: 50% auto 0;
dans votre #top-text
règle.OriginalL'auteur nictoriousface | 2013-07-10
Vous devez vous connecter pour publier un commentaire.
C'est possible avec l'utilisation de
transform: translate(-50%, -50%);
En utilisant le présent de l'intérieur de l'élément peut être dynamique(pas besoin de marge négative), voir cet exemple
http://jsfiddle.net/Mfsfm/2/
OriginalL'auteur koningdavid