div를 수직으로 정렬하는 방법

Question

가격은 같은 줄에 있고, 바로 위의 세부 정보보기 버튼을 원합니다. 나는 시도했다

vertical-align: bottom 

운 없음. http://enterprise-demo.user.magentotrial.com/women/tops-blouses.html

Answer 1

처럼 각 div 몇 가지 클래스를 부여 당신의

<div class="price-box"> 

당신의 자신의 첫 번째 자식으로

<div class="action"> 

.

Answer 2

당신은 또한 이동할 수있는이

.element { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 

Answer 3

HTML 구조를 번갈아 사용할 수 있다면 @Roy가 말한 것처럼 div.price-box을 .actions div로 복사 할 수 있습니다.

그렇지

, 당신은 div.action 블록 position:absolute을 가지고 있기 때문에 가격은 "자세히보기"버튼을 수직으로 정렬되지

.products-grid .price-box{position:absolute;width:100%;bottom:90px} 

을 할 수 있습니다. 가격을 항상 "세부 사항보기"버튼 바로 위에 두려면 절대 위치를 지정할 수 있습니다.

Answer 4

div를 세로로 정렬하는 방법은 다양합니다. 가장 좋은 방법은 수직 정렬에 대한 개념을 배우고 자신의 사례에 가장 적합한 방법을 사용하는 것입니다. This blog post은 그 일을하는 6 가지 방법을 보여 주며 많은 도움이되었습니다.