상대 위치 지정과 인라인 블록을 사용하여 DIV의 수직 정렬?

Question

DIV의 내용이 다른 높이 (DIV 자체가 고정 크기 임에도 불구하고)가 다를 때 DIV를 세로로 정렬하는 데 문제가 있습니다.

See HTML example here (with inline CSS)

나는 텍스트와 같은 DIV의에 "흐름"을 원하는, 그래서 가능하면 position:absolute을 사용하지 않도록하고 싶습니다. 나는 DIV의에 붕괴되지 않습니다 display: inline-block을 사용하고 있습니다.

Answer 1

는 vertical-align 속성을 추가 - 그들은 모두 같은 일을하든 문제가되지 않습니다, 그들은 같은 크기이야 때문이다. 서로 다른 크기라면, vertical-align: middle를 사용

.collection_box { 
    vertical-align: middle; /* or top, or bottom, if they're the same size */ 
} 

Answer 2

왼쪽에 플로트

:

.collection_box { 
    float: left; 
}