web-dev-qa-db-ja.com

CSSを使用して動画を中央に配置する方法

私は自分のサイト内でビデオを中央に配置しようとしていますが、HTMLで中央タグを使用したくありません。 CSSでこれを行うにはどうすればよいですか？助けになれば、これが私のHTMLコードです。

<center>
  <video width="320" height="240" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    <source src="video.webm" type="video/webm">
    Your browser does not support the video tag.
  </video>
</center>
cssvideocenter
5
Rhiannon

次に例を示します。 http://jsfiddle.net/Cn7SU/

これらのCSSルールを要素videoに追加するだけです。

display: block;
margin: 0 auto;

display: blockプロパティは非常に重要です。そうしないと、要素を中央に配置できません。

16
leoMestizo

ビデオを水平方向に中央揃えするには、以下を追加します。

display: block;
margin: 0 auto;
4
Kerim

ビデオを中央に配置する3つの方法は次のとおりです。

1.マージンを使用する

video {
  display: block;
  margin: auto;
}

2.変換を使用する

video {
  margin-left: 50vw;
  transform: translate(-50%);
}

3.コンテナを使用＆ flexbox

.container video {
  display: flex;
  justify-content: center;
}
1
Khaki

これを試して、あなたのビデオタグの周りにラッパーdivを置いてください。 HTML5ビデオと画像は、スタイル設定時にテキストのように扱われます。したがって、text-align：centerが機能します。以下のフィドルを確認できます。

<div class="video">  
  <video width="320" height="240" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    <source src="video.webm" type="video/webm">
    Your browser does not support the video tag.
  </video>
</div>
1
user760226