수직 동적 콘텐츠

Question

인터넷을 통해 내 문제를 검색했으며 항상 동일한 해결책을 찾았지만 문제가되지 않았습니다. 내 코드의 내용이 '수직 중심 div의 동적 콘텐츠

나는이 웹 페이지를 http://staging.karlienfabre.be/pocoloco/reizen/canyoning.html

을했습니다 그리고 문제는 최초의 노란색 부분이다. 왼쪽 텍스트가 세로로 가운데에 표시되도록하겠습니다. 텍스트의 길이는 다를 수 있습니다. 오른쪽의 흰색 상자도 세로로 가운데에 있어야합니다.

이 순간에 HTML은 CSS를 내가 생각이

<div class="container yellow-content"> 
    <div class="row center-vertical"> 
     <div class="col-md-7 vertical-center-element"> 
      <h2>Actie en avontuur</h2> 
      <p> 
       540 smith grind grind hang up launch ramp. Sponsored gnarly no comply regular footed hang-up. Quarter pipe tic-tac aerial hang ten airwalk. Deck baseplate crail grab bluntslide regular footed. Varial carve darkslide ollie hole Vans Calfornia Daze rocket air. Pivot kick-nose ollie sketchy death box Steve Rocco. 
      </p> 
     </div> 
     <div class="col-md-3 col-md-offset-1 bgwhite vertical-center-element"> 
      <div class="row text-center"> 
       <div class="col-md-6 col-md-offset-3"> 
        <div class="text-center testimonial"> 
         <a href=""> <img class="img-circle img-responsive" src="../img/reisaanbod/testimonials/testi_canyoning.jpg" alt=""> </a> 
        </div> 
       </div> 
      </div> 
      <div class="row text-center"> 
       <div class="row-md-9"> 
         <p>Tic-tac nollie bearings Ron Allen disaster. Downhill blunt no comply Kevin Jarvis slob air. Deck Brooklyn Banks indy grab slap maxwell pop shove-it.</p> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

처럼 찾고은

.row.center-vertical{ 
    display: table; 
} 
.vertical-center-element{ 
    display: table-cell; 
    vertical-align: middle; 
} 

내가 잘못하고 또는 무엇을하고있어 찾을 수없는이 중심 것을 만드는 것이 중요하다 작동 안됨. 사전에

감사합니다!

Answer 1

변경

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

.vertical-center-element { 
    display: inline-block; 
    vertical-align: middle; 
    float: none; 
} 

에 당신은 수직으로 정렬에서 그것을 방해하는 요소 float: left 있습니다. 위의 코드 (특히 float:none)가이를 오버라이드합니다. 귀하의 경우에는

편집

을하는 데 도움이

희망, 왜 변화하지 :

<div class="col-md-7 vertical-center-element"> 
     <h2>Actie en avontuur</h2> 

(주 COL-MD-8이 아닌 COL-MD-7)

에

<div class="col-md-8 vertical-center-element vertical-centered-text"> 
     <h2>Actie en avontuur</h2> 

다음 CSS를 적용하십시오 :

.vertical-center-element { 
    display: inline-block; 
    vertical-align: middle; 
    float: none; 
} 

.vertical-centered-text { 
    padding-right: 60px; 
} 

그런 식으로 모든 요소가 올바르게 정렬되고 텍스트가 올바른 위치에 있습니다. CSS를 변경하지 않았으므로 크기를 줄인 경우 부트 스트랩 눈금에 예기치 않은 변경 사항이 적용되지 않습니다.