부트 스트랩 3 행의 콘텐츠를 세로로 가운데에 배치합니까?

나는 Bootstrap3 페이지를 가지고 있는데, 중간 정도의 위치는 전체 디스플레이 높이의 행입니다. 행의 내용을 세로 가운데에 배치하려면 어떻게합니까?부트 스트랩 3 행의 콘텐츠를 세로로 가운데에 배치합니까?

"vertical-align : center"CSS 속성을 이미 시도했지만 작동하지 않습니다 ('center'대신 'middle'도 아님).

여기에 작은 live demo, 또는 독립형 HTML의 예와 같은 :

<!DOCTYPE html><html><head><meta charset='utf-8'> 

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css'> 
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css'> 
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js'></script> 

<style type='text/css'> 
    .row { color:#ff0; } 
    .bg1 { background:#007; } 
    .bg2 { background:#060; } 
    .special { background:#600; height:100vh; vertical-align:center; } 
</style> 

</head><body> 

<div class="container-fluid text-center"> 

    <div class="row bg1">Top row<br><br></div> 

    <div class="row bg2">Another row<br>With some content<br><br></div> 

    <div class="row bg1">....Bla bla bla....<br>sadf asdf adsf asdf asdf<br><br></div> 

    <div class="row special"> 
     <h2>Hello</h2> 
     This should be vertically centered 
    </div> 

    <div class="row bg2">And here's yet another row<br><br></div> 

    <div class="row bg1">The bottom row<br><br></div> 

</div> 

</body></html>

출처

2014-11-12 RocketNuts

덕분에, 테이블 솔루션은 실제로 잘 나가 일했다! – RocketNuts

.row은 내부 col-X-X없이 사용하여 열에 대한 부정적인 마진을 가지고 있습니다. 그리드 시스템 사용 방법에 관한 문서를 읽으십시오. http://jsfiddle.net/mLopevv8/

ME를 읽어 : 셀에만 또 다른 클래스를 확인, .container 유체를 제거 변환

는 http://css-tricks.com/centering-in-the-unknown/

DEMO vertical-align:middle (안 센터)의 다양한 방법이있다 디스플레이에 수직으로 정렬 된 중간 콘텐츠의 부모 : 테이블 및 자식 이제 디스플레이 : 테이블 - 셀입니다.

CSS

.special { background:#600; height:100vh; display:table;width:100%;} .v-m {display:table-cell;vertical-align:middle}

HTML 모두

<div class="text-center"> <div class="my-row bg1">Top row<br><br></div> <div class="my-row bg2">Another row<br>With some content<br><br></div> <div class="my-row bg1">....Bla bla bla....<br>sadf asdf adsf asdf asdf<br><br></div> <div class="my-row special"> <div class="v-m"> <h1>Hello</h1> This should be vertically centered! </div> </div> <div class="my-row bg2">And here's yet another row<br><br></div> <div class="my-row bg1">-- The bottom row --<br><br> </div> </div>

출처

2014-11-12 16:00:30 Christina

한 가지 방법은 당신이 수직 및 수평 중앙에 배치 할 텍스트 행 높이를 제공하는 것입니다 만, 행 높이 그것이 배치되는 div의 높이의 절반과 같아야합니다.

or

U이 링크를 확인하실 수 있습니다, 이것은 당신을 도움이 될 수 있습니다 : 당신이 이상한 결과를 얻을 것입니다 http://jsfiddle.net/jasongennaro/unfwL/1/

출처

2014-11-12 15:19:09 user1976940

감사합니다. 그러나 중앙에 놓일 내용은 작은 단락 (줄 또는 줄 바꿈이 포함될 수 있음)과 이미지 이상으로 구성됩니다. 따라서 센터링을 강화하기 위해 선 높이를 변경하면 일반적으로 콘텐츠 자체에도 영향을 미칩니다 ...? 다른 예를 들면, 테이블 디스플레이를 사용합니다. 불행히도 내 경우에는 편리하지 않습니다 (전체적으로 표시되는 방식에 영향을줍니다). – RocketNuts

부트 스트랩 3 행의 콘텐츠를 세로로 가운데에 배치합니까?

답변

관련 문제