如何定位“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横向对中元素的黑客入侵。