12

ビデオの幅を固定せずにdivを中央に配置しようとしているため、ウィンドウのサイズが変更されると、divはそれに伴って縮小しますが、中央に残ります。私が持っている現在のセットアップは、半分の負のマージンで left:50% を使用してほぼ正しいです。問題は明らかに、負のマージンが固定されているため、左に移動することです。何か案は？ありがとう！

私の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>

私の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%;

}

フィドルはこちら

4

1 に答える 1

20

これは、transform: translate(-50%, -50%); これを使用することで可能です。これを使用すると、内側の要素を動的にすることができます (負のマージンは必要ありません)。この例を参照してください。

http://jsfiddle.net/Mfsfm/2/

于 2013-07-10T14:43:30.813 に答える