web-dev-qa-db-ja.com

動画を中央揃えにする方法

私は、ワードプレスのブログ記事の中でビデオをセンタリングすることはできません。動画に使用されているショートコードは次のとおりです。

[video width="1920" height="1080" m4v="http://p4s.ccafs.cgiar.org/wp-content/uploads/2017/02/RHoMIS-Fieldwork.m4v"][/video]

それは私のアップロードしたメディアからのmp4ビデオファイルです。これを私のstyle.cssに追加しようとしましたが、まだうまくいきませんでした。

.wp-video {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

助けてください....

cssembed
2
user113449

要素を中央揃えにするには、その親要素もスタイル設定する必要があります。それでは、あなたのビデオの構造は次のようになります。

<div class="parent-class"> 
    <video class="wp-video">
    </video>
</div>

ビデオを中央に配置するには、その親に幅を指定する必要があります。使用方法

.parent-class{
    width:100%;
    display:block;
}

これで最後の仕上げをすることができます。

.wp-video {
    text-align: center;
    margin: 0 auto;
    max-width: 400px;
    display: block
}

ビデオの幅は1920pxなので、ほとんどの画面でオーバーフローするので、このビデオの幅を定義する必要があります。

2
Jack Johansson