如何定位「MediaElement」媒體播放器

Question

我是web開發新手，我在我的網站中使用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 { 
    display: flex; 
    justify-content: center; 
    width: 100%; 
} 

一類的wrapper將水平居中內本身的項目結束語在<div>您的項目。如果您正在開發支持flexbox的平臺，那麼瞭解flexbox佈局有助於避免學習神祕，經典的CSS橫向對中元素的黑客入侵。