尝试将视频放到我的HTML和CSS页面

Question

I am trying to put video to the center of my html and css page and everytime that video get stuck to top of the left side what to do ? 我正在尝试将视频置于html和CSS页面的中心，并且每次该视频卡在左侧顶部时该怎么办？ what is wrong ? 怎么了？ This is my school project.Can you at least tell me other way to do this. 这是我的学校项目。您至少可以告诉我另一种方法吗？

<!DOCTYPE html>

<HEAD>!
  <TITLE></TITLE>

  <LINK href="to.css" rel="stylesheet" type="text/css">


</HEAD>

<BODY>

  <DIV ID="header">
    <div id="nav">
      <div id="nav_wrapper">
        <ul>
          <li><a href="#">HOME</a>
          </li>
          </li>
          <li> <a href="#">dropdown #1</a>

            <ul>
              <li><a href="#">dropdown #1 item #1</a>
              </li>
              <li><a href="#">dropdown #1 item #2</a>
              </li>
              <li><a href="#">dropdown #1 item #3</a>
              </li>
            </ul>
          </li>
          <li> <a href="#">dropdown #2</a>

            <ul>
              <li><a href="#">dropdown #2 item #1</a>
              </li>
              <li><a href="#">dropdown #2 item #2</a>
              </li>
              <li><a href="#">dropdown #2 item #3</a>
              </li>
            </ul>
          </li>
          </li>
        </ul>
      </div>
      <!-- Nav wrapper end -->
    </div>


  </DIV>

  </DIV>

  <DIV ID="wrapper">
    <DIV ID="content_area">
      <p></p>
      <center>
        <video width="400" height="240" controls>
          <source src="fifa.mp4" type="video/mp4">
            <source src="fifa.ogg" type="video/ogg">
              <source src="fifa.webm" type="video/webm">
                <object data="fifa.mp4" width="320" height="240">
                  <embed src="fifa.swf" width="320" height="240">
                </object>
        </video>
      </center>

    </DIV>
  </DIV>

  <DIV ID="footer">
    Hello and Welcome --------------
  </DIV>

</BODY>

</HTML>

CSS: CSS：

body {
    margin: 0;
    padding: 0;
    min-width: 525px;
    font-family: Arial;
    font-size: 17px;
    background-image: url('fifa2.jpg');
}

#header {
    float: left;
    width: 100%;
    height: 100px;
    position: absolute;
    backgroundcolor: }


    #footer {
    float: left;
    width: 100%;
    background-color: #000000;
    font-weight: bold;
    text-align: center;
    position: absolute;
    height: 40px;
    left: 0px;
    bottom: 0px;
}

#wrapper {
    float: left;
    padding-left: 200px;
    padding-right: 125px;
    overflow: hidden;
}

#left_side {
    position: relative;
    float: left;
    width: 200px;
    right: 200px;
    margin-left: -100%;
    padding-bottom: 2000px;
    margin-bottom: -2000px;
}

#right_side {
    position: relative;
    float: left;
    width: 125px;
    background-color: #66CCCC;
    margin-right: -125px;
    padding-bottom: 2000px;
    margin-bottom: -2000px;
}

#content_area {
    position: relative;
    float: left;
    background-color: #ffffff;
    width: 100%;
    padding-bottom: 2000px;
    margin-bottom: -2000px;
}

#nav {
    background-color: #222;
}

#nav_wrapper {
    width: 350px;
    margin: 0 auto;
    text-align: left;
}

#nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: relative;
    min-width: 200px;
}

#nav ul li {
    display: inline-block;
}

#nav ul li:hover {
    background-color: #333;
}

#nav ul li a, visited {
    color: #CCC;
    display: block;
    padding: 15px;
    text-decoration: none;
}

#nav ul li:hover ul {
    display: block;
}

#nav ul ul {
    display: none;
    position: absolute;
    background-color: #333;
    border: 5px solid #222;
    border-top: 0;
    margin-left: -5px;
}

#nav ul ul li {
    display: block;
}

#nav ul ul li a:hover {
    color: #699;
}

Link to image: http://i.stack.imgur.com/NnvlO.jpg 链接到图像： http : //i.stack.imgur.com/NnvlO.jpg

Answer 1

In CSS delete the float: left; 在CSS中删除float: left; from #wrapper the background-color: #ffffff; 来自#wrapper的background-color: #ffffff; #wrapper background-color: #ffffff; from the #content_area and adjust the video by using margin-top property. 从#content_area然后使用margin-top属性调整视频。 This is however the easiest way around. 但是，这是最简单的方法。 You might consider doing this correctly by following the instructions in the link below. 您可以按照以下链接中的说明考虑正确执行此操作。 And a little tip: we use lowercase in HTML nowadays :) 还有一点提示：我们现在在HTML中使用小写字母:)

How to vertically center a div for all browsers? 如何将所有浏览器的div垂直居中？

Here is the changed code: 这是更改后的代码：

#wrapper {
    padding-left: 200px;
    padding-right: 125px;
    overflow: hidden;
}

#content_area {
    position: relative;
    float: left;
    width: 100%;
    padding-bottom: 2000px;
    margin-bottom: -2000px;
}

video {
    margin-top: 250px;
}

Good luck with your school project! 祝您的学校项目好运！

Answer 2

If you don't plan on having other content on this page then you can use the following css 如果您不打算在此页面上包含其他内容，则可以使用以下CSS

video {
    width : 400px;
    height : 240px;
    position : absolute;
    left : 50%;
    top : 50%;
    margin-left : -200px;
    margin-top : -120px;
}

But you should add an id to the video and select it by id. 但是您应该在视频中添加一个ID，然后按ID进行选择。

尝试将视频放到我的HTML和CSS页面

问题描述

2 个解决方案

解决方案1
2 已采纳 2014-08-22 18:15:29

解决方案2
0 2014-08-22 18:55:37

尝试将视频放到我的HTML和CSS页面

问题描述

2 个解决方案

解决方案1 2 已采纳 2014-08-22 18:15:29

解决方案2 0 2014-08-22 18:55:37

解决方案1
2 已采纳 2014-08-22 18:15:29

解决方案2
0 2014-08-22 18:55:37