첫 번째 세로 가운데 div로 div 정렬

Question

페이지가 있습니다. 여기에 속한 범주에 따라 이미지가 나란히 표시됩니다. 각 이미지 배열은 속한 범주로 시작됩니다. 이미지의 너비는 &이며 높이는 절대 높이 330px 인 div에 배치됩니다.

CSS :

.front-index { 
margin: 0 1em 0 2em; 
} 

.front-work { 
    margin: 0 2em 2em 0; 
    display: table; 
    width: 66px; 
    position: relative; 
    height: 330px; 
    background-color:#f0f0f0; 
} 

.front-work img { 
    margin: .3em 0 .3em 0; 
} 

.wraptocenter { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
} 

.wraptocenter * { 
    vertical-align: middle; 
} 

.front-index, 
.front-work { 
    float: left; 
} 

HTML :

<div class="front-index"><p>How to get<br /> this text on the same line with<br /> yellow image on the right?</p></div> 


    <div class="front-work"> 
     <div class="wraptocenter"> 
      <img width="162" height="250" src="http://images.fanpop.com/images/image_uploads/Yellow-Wallpaper-yellow-646738_800_600.jpg"/> 
     </div> 
    </div> 

    <div class="front-work"> 
     <div class="wraptocenter"> 
      <img width="250" height="166" src="http://www.takenseriouslyamusing.com/wp-content/uploads/2012/08/Blue.png"/> 
     </div> 
    </div> 
… 

JSFIDDLE : http://jsfiddle.net/rCAKa/9/

내가 처음 이미지와 같은 라인에 텍스트를 정렬하고 싶습니다

권리.

내가 염두에 두었던 것은 이것이 jquery에서 수행되어야하는 것일 수 있습니다. 예. 어쨌든 .front-work div 안의 위쪽에서 이미지 거리를 측정 한 다음 값을 .front-index div에 인라인 코드 (top : what px)로 지정하십시오.

어쩌면 여러분 중 누군가가 이런 종류의 문제에 직면 해 있으며 이런 종류의 문제에 대한 해결책을 알고 있습니까? CSS 또는 JS. 나는 당신이하고있는 것은 CSS를 통해 가능하다고 생각하지 않습니다 내 소견에서

Answer 1

은 - 당신이 첫 번째 이미지 (컨테이너의 상단에서) 상대 위치를 알 필요가 있기 때문에 몇 가지 간단한 자바 스크립트 속임수가 필요 텍스트를 배치하려면 오른쪽에있는 CSS를 사용하십시오.

JS의 전략이 될 것이다 :

1. 루프는
2. 오른쪽으로 첫 번째 이미지의 수직 오프셋 가기 반입 배치 할 텍스트가 각 소자를
(함유하는 부모에 대해)

3. 이미지의 상단 위치와 일치하는 상단 패딩을 설정하십시오. 또는 하위 요소의 상단 위치, 여백 또는 여백을 설정하거나 텍스트의 위치를 ​​변경하는 다른 방법을 설정할 수 있습니다.

   나는 당신의 바이올린 포크 있고, 여기에 행동에 그것을 볼 수

   $(document).ready(function() { 
       $(".front-index").each(function() { 
        var fromTop = $(this).next().find("img").position().top; 
        $(this).css({ 
         "padding-top":fromTop 
        }); 
       }); 
   }); 
   

- http://jsfiddle.net/teddyrised/LT54V/1/

P/s의 : 관련 메모에서 .wraptocenter * { }은 같이 (아마 최고의되지 않습니다 왜냐하면 당신이 요소에 많은 자식 요소를 가지고 있다면 (더 많은 자식 요소를 가질 수도 있고 더 가질 수도있다), CSS는 모든 요소를 ​​반복해야하기 때문이다. 대신 .wraptocenter > * { } 또는 단지 .wraptocenter img { }을 사용해보십시오.

Answer 2

먼저 CSS를 사용하여 문제를 해결하려고했습니다.

1. 는
2. 그 중심 처음에 테이블 셀 사업부를 확인 테이블로 설정 한 디스플레이 오른쪽에있는 셀과 같은 높이 사업부를 만들기 : 잠시 후 나는 다음과 같은 논리를 파악 수직
3. 이 div에서는 이미지와 동일한 높이로 다른 하위 분할을 만듭니다.

   <div class="front-index"> 
       <div class="front-index-inner"> 
        <div style="height:250px;"> 
         <p>How to get<br /> this text on the same line with<br /> yellow image on the right?</p> 
        </div> 
       </div> 
   </div> 
   

   내 CSS의 일환으로

   이 :

   .front-index { 
       margin: 0 1em 0 2em; 
       display: table; 
       height: 330px; 
       overflow: hidden; 
   } 
   .front-index-inner { 
       display: table-cell; 
       width: 100%; 
       vertical-align: middle; 
   } 
   

   당신은 여기에 결과를 볼 수 있습니다 http://jsfiddle.net/rCAKa/10/

   을 나는이 희망

는 HTML 코드는 다음이있다 명확하고, 이해할 수 있고, 유용한 솔루션을 제공합니다.

인사말,

제프