2017-12-18 1 views
-2

저는 비디오와 CSS 애니메이션을 가지고 있습니다. 나는 비디오를 가운데에 놓고 왼쪽에있는 애니메이션을 원합니다. 나는 그들을 부유 시키려고 노력했다. 그러나 이것은 그들 사이에 큰 차이를 남겼다. - codepen - https://codepen.io/MarkHarrison/pen/xpZLLy요소를 나란히 정렬하는 방법?

iframe{ 
    border: 10px solid transparent; 
    border-image-source: url(https://i.imgur.com/91tJ1qi.png); 
    border-image-slice: 10; 
    width: 500px; 
    height: 300px; 
    display: block; 
    margin: auto; 
} 

.box { 
    position: relative; 
    margin: 0px; 
    display: block; 
    width: 600px; 
    height: 420px; 
    margin-top: 15%; 
} 
+1

이 원하는 최종 효과인가? https://codepen.io/sol_b/pen/ppgLXE – sol

+0

[mcve] (Stack Snippet 형식)를 질문에 직접 추가 할 수 있습니까? 건배! – domsson

답변

0
  1. 추가 "위치 : 상대"를 .wrapper에 // 마법 CSS를 추가 .box
  2. 에서 마진 탑 2. 제거 %가

    을 .box하지 않는다

    위치 : 절대; 상단 : 0; 왼쪽 : calc (50 % - 520px); 변형 : translateX (-50 %);

// 그나마 '4. 이미지가 사용 변환 수직으로 맞도록 그들과 함께 최고/픽셀을 조정 : translate Y를()를 대신

관련 문제