如何使用适合屏幕宽度的视频放在屏幕中心？

时间：2017-11-10 08:54:22

标签： javascript html jquery-mobile

我使用jquery mobile，我想将视频放在屏幕中央，无论屏幕宽度如何。我使用了这种语法，但左边距和右边距不相同。 [

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
    <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css">
    <script src="jquery-1.11.3.min.js"></script>
    <script src="jquery.mobile-1.4.5.min.js"></script>
    <title>Hello World</title>
  </head>

  <body>

    <div data-role="header"></div>
  
    <div data-role="main" class="ui-content">
      <span style="position: fixed; left: 50%; top: 50%; margin-left:-150px; margin-top: -150px;">
        <video width="block" height="auto"   id="video_mute" controls>
          <source src="angka/bilangan_1.mp4" type="video/mp4">
        </video>
      </span>
    </div>
  </body>
</html>
＆＃13;
＆＃13;
＆＃13;

enter image description here

2 个答案:

答案 0 :(得分：0)

使用transform代替保证金。检查下面更新的代码段... 

.videoDiv {
  position: fixed; 
  left: 50%; 
  top: 50%; 
  transform: translate(-50%, -50%);
}
<div data-role="header">
</div>

<div data-role="main" class="ui-content" >
  <span class="videoDiv" style="">
    <video width="block" height="auto"   id="video_mute" controls>
      <source src="angka/bilangan_1.mp4" type="video/mp4">
    </video>
  </span>
</div>

答案 1 :(得分：0)

使用transform：translate（-50％， - 50％）; - moz-transform：translate（-50％， - 50％）; - webkit-transform：translate（-50％， - 50％）;对于中心

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
    <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css">
<script src="jquery-1.11.3.min.js"></script>
<script src="jquery.mobile-1.4.5.min.js"></script>
    <title>Hello World</title>
    </head>

<body>

  <div data-role="header">
  </div>
  
  <div data-role="main" class="ui-content" >
	<span style="position: fixed; left: 50%; top: 50%; transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);">
    <video width="block" height="auto"   id="video_mute" controls>
		<source src="angka/bilangan_1.mp4" type="video/mp4">
		</video></span>
		</div>

相关问题
最新问题