트위터에서 콘텐츠를 세로로 가운데 맞추는 방법 작동하는 부트 스트랩?

이전 질문을 읽고 해결책을 찾았지만 아무 것도 작동하지 않는 것 같습니다. 트위터에서 콘텐츠를 세로로 가운데 맞추는 방법 작동하는 부트 스트랩?

내 예를 들어 부트 스트랩 HTML

은 매우 간단합니다 :

... 
<body> 
    <div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span4" class="centering"> 
     span4 
     </div> 
     <div class="span8" class="centering"> 
     span8    
     </div> 
    </div> 
    </div> 
</body> 
...

다음과 같이 centering 클래스를 설명하는 CSS는 다음과 같습니다

.centering { 
    float:none; 
    margin:0 auto; 
}

브라우저가있는 텍스트 span4 및 span8를 넣어이 코드를 렌더링 브라우저 윈도우의 수직 가운데가 아닌 브라우저 윈도우의 상단. 내가 이것을 세우면서 간과 한 것은 무엇입니까?

출처

2013-05-02 Alex Reynolds

만 관찰하지만 캔트 DIV 클래스 = "span4"클래스 = "centering"은 div class = "span4 centering"이됩니까? 범위 내의 콘텐츠를 중앙에 배치 하시겠습니까? 그렇다면 텍스트 정렬을 시도하십시오. 센터, 질문을 이해하고 있는지 확실하지 않은가요? 예제가 도움이 될 것입니다. http://jsfiddle.net/BzYxM/ – Richlewis

나는 이것이 실제 시나리오에서 당신을 위해 매우 실용적이 될 것인지 모르겠지만 가치가 어쨌든보고, :

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 

<style media="all"> 
html, body{height:100%; margin:0;padding:0} 

.container-fluid{ 
    height:100%; 
    display:table; 
    width: 100%; 
} 

.row-fluid {height: 100%; display:table-cell; vertical-align: middle;} 

.centering { 
    float:none; 
    margin:0 auto; 
} 
</style> 

</head> 
<body> 
    <div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span4" class="centering"> 
     span4 
     </div> 
     <div class="span8" class="centering"> 
     span8    
     </div> 
    </div> 
    </div> 
</body> 
</html>

출처

2013-05-02 10:40:41

감사합니다. 그러나 'span4'와'span8' 요소 모두에 내용이있는 경우에는 이것이 작동하지 않는 것 같습니다. 'span4' 또는'span8'에 내용이있을 때 작동하는 것 같습니다. –

흠, 그건 이상합니다. 만약 내가 뭔가를 놓치지 않으면 그 div들 모두에게 내용을 추가하면 저를 위해 일하게 될 것 같습니다. 많은 콘텐츠에 대해 이야기하고 있습니까? –

하나의 div (문장 또는 두 개)의 텍스트와 다른 이미지의 이미지. –

트위터에서 콘텐츠를 세로로 가운데 맞추는 방법 작동하는 부트 스트랩?

답변

관련 문제