"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> 태그로 묶는 것이지만, 저는 이것을 심각하게 추천하지는 않습니다. 웹 개발을 처음 접한다면 최소한 알고 있어야합니다.

기타 옵션에는 주로 CSS가 관련됩니다. 나는 flexbox model을 조사 할 것이다. 레이아웃이 환상적입니다.

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

자체 내에서 항목을 수평으로 중앙합니다 wrapper의 클래스와 <div>에 항목을 배치. flexbox를 지원하는 플랫폼을 개발하고 있다면, flexbox 레이아웃을 아는 것은 수평 적으로 중심을 맞추는 고전적인 CSS 해킹을 피하는 데 도움이됩니다.