CSS : 이미지와 중간 높이가있는 3 열 레이아웃

Question

두 개의 사이드 바와 한 개의 가운데 이미지를 높이에 정렬하고 싶습니다. 또한 텍스트를 포함하고있는 사이드 바는 바깥 쪽 컨테이너와 수직으로 정렬되어야합니다. 이 http://jsfiddle.net/SW3DT/

당신이 바이올린 HTML 미리보기 (또는 작은 뷰)으로 볼 때 올바른 모든 것을 볼 수 있지만 전체 화면에이 예제를 갖는 것은 그것이 작동하지 않습니다

가 나는 문제를 설명하는 바이올린을 만든 더 이상. 따로

1. 정렬 및 중앙 용기 가로 :

   그래서 다음과 같은 문제점이있다 (위치 : 절대, 왼쪽, 오른쪽)

2. 가 잡담로부터 자식 오브젝트 맞추고 (이 경우는 P의) 상하 그것은 다른 화면에서 사용할 수 있도록
3. 모든 동적으로이 작업을 수행합니다 (절대 나누기) 크기
당신이 함께 세 가지 점을 볼 힘든이 위스콘신 코딩 할 수있는 방법

th css.

해결책이있는 사람이 있습니까?

추가 : 어떻게 이러한 작업을 위해 재사용 가능한 CSS 클래스를 정의 할 수 있습니까?

최고 감사합니다, bsus

Answer 1

난 당신이 좀 폭 200 픽셀을 점령 왼쪽과 오른쪽 열을 가진 세 개의 열이있는 중심 래퍼를 원하는 제대로 질문을 이해 한 경우. 이 경우 :이

<div class="content"> 
    <aside class="column right"> 
     <p> 
      text... 
     </p> 
    </aside> 
    <aside class="column left"> 
     <p> 
      text... 
     </p> 
    </aside> 
    <div class="column center"> 
     <img class="home_image" src="path_to_image.png" /> 
    </div> 
</div> 

CSS :

/* the main wrapper */ 
.content { 
    position: absolute; top: 50%; left: 50%; 
    width: 800px; height: 500px; 
    margin-left: -401px; margin-top: -251px; 
    border: 1px solid #D9D9D9; 
} 

/* columns */ 
.column { 
    position: absolute; top: 0; bottom: 0; 
    width: 180px; 
    padding: 10px; 
} 

.column.left{ 
    left: 0; background-color: #F2F2F2; 
} 
.column.right { 
    right: 0; background-color: #F2F2F2; 
} 
.column.center { 
    left: 200px; right: 200px; 
    text-align: center; 
    width: auto; 
} 

.column.center img { 
    border: 1px solid #111; border-radius: 22px; 
    width: 128px; height: 128px; 
    margin: 0 auto; 
} 

는 또한

: 어떻게 재사용 css-을 정의 할 수

이 Fiddle Example

HTML보기 그런 과업을위한 수업?

당신은 따라서, .left, .right 및 .center 요소에 적용되는 세에 재사용되는 .column 클래스를 볼 수 있습니다.