Question

我在中心遇到视频问题。我无法进入div的中心。

这是我的HTML代码。

<div id="aside">
     <div id="videoClip">
        <p> Check out my new video clip! </p>
        <p>
          <video id="video" class="video-js vjs-default-skin"
            controls preload="auto" width="400" height="300" 
                poster="my_video_poster.png" data-setup="{}">
            <source src="my_video.mp4" type='video/mp4'>
        <source src="my_video.webm" type='video/webm'>
       </video>
        </p>
     </div>
 </div>

我的css是这个

#aside {
    float:left;
    width:40%;
    text-align:center;
}

#aside p {
    margin:20px 0;
}

#aside img {
    border:1px solid black;
    height:400px;
}

#videoClip {
    margin:0 auto;
}

并尝试检查此JSFIDDLE

我已经放了videoClip margin:0 auto;，但它仍无效。如果我把text-align:center也不起作用。

Answer 1

它在旁边，只有40％宽

和

#videoClip {
    margin:0 auto;
    display:block;
    float:none;
}

Answer 2

您拥有周围的div#aside float: left和width: 40%。当然，这限制了video。当您aside全宽时，video将正确居中

#aside {
    float:left;
    width:100%;
    text-align:center;
}

请参阅JSFiddle

或者只是遗漏width和float也可以正常使用

#aside {
    text-align:center;
}

JSFiddle

视频div在中心

2 个答案: