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 {
  display: flex;
  justify-content: center;
  width: 100%;
}

将您的项目包裹在<div> wrapper的{{1}}项中，会将项目水平居中。如果您正在开发支持flexbox的平台，那么了解flexbox布局有助于避免学习水平居中元素的经典CSS黑客攻击。

如何定位＆＃34; MediaElement＆＃34;媒体播放器

2 个答案: