"MediaElement"メディアプレーヤーの配置方法

Question

私はウェブ開発で新しく、私は自分のウェブサイトでメディアプレーヤーとしてMediaElementを使用しています。私はオーディオプレーヤーを配置しようとしていますが、別に配置する必要がある要素が多すぎます。一気にすべてのものを配置するのは、簡単で特異なアプローチですか？

Answer 1

ウェブページのあらゆるコンポーネント、特にメディアプレーヤーを囲む親要素が常にあります。これは、位置付けが必要な唯一のものです。すべての子要素が続きます。

以下、の偽のメディアプレーヤーの実行例を作成しました。トップレベルの.playerクラスにのみ位置指定スタイルがあることに注目してください。それらはあなたが設定する必要がある唯一のものです。すべての子要素のスタイルは、メディアプレーヤー自体に付属するデフォルトのスタイルシートから来ます。

/* only position the parent container */ 
 
.player { 
 
    position: absolute; 
 
    top: 100px; 
 
    left: 100px; 
 
} 
 

 
/* IGNORE THESE, assume they're from the media player's own stylesheets */ 
 
.player .player-video { 
 
    width: 250px; 
 
    height: 200px; 
 
    background: #000; 
 
} 
 

 
.player .player-controls { 
 
    padding: 5px; 
 
    background: #CCC; 
 
} 
 

 
.player .player-play-button, 
 
.player .player-next-button { 
 
    display: inline-block; 
 
}

<div class="player"> 
 
    <video class="player-video"></video> 
 

 
    <div class="player-controls"> 
 
    <button class="player-play-button">PLAY</button> 
 
    <button class="player-next-button">NEXT</button> 
 
    </div> 
 
</div>

は、マージン、パディングセンタリングなどの要素を配置するので、それが正しくレイアウトだろうことを確認するために、すべての選択肢を模索するようにしてくださいするには、他の方法があります。

Answer 2

あなたの要素を<center>タグで囲むことは単なる（ただし安価な）アプローチですが、これは真剣にお勧めしません。 Web開発に慣れていない場合は、少なくともそれを知っておく必要があります。

その他のオプションには、主にCSSが関係します。私はflexbox modelをチェックアウトします。レイアウトにとっては素晴らしいことです。 wrapperのクラスに<div>であなたのアイテムをラッピング

.wrapper { 
    display: flex; 
    justify-content: center; 
    width: 100%; 
} 

は水平自体の中のアイテムを中心に説明します。 flexboxをサポートするプラットフォーム用に開発している場合は、フレックスボックスレイアウトを知ることは、要素を水平に配置する古典的なCSSのハックを避けるために役立ちます。