與中心的內容

100％高度的div我試圖重現：http://jsfiddle.net/MGRdP/6/與中心的內容

html, body{ 
 
    height:100%; 
 
} 
 

 
.table { 
 
    width: 100%; 
 
    display: table; 
 
    height:100%; 
 
} 
 

 
.cell { 
 
    border: 2px solid black; 
 
    vertical-align: middle; 
 
    display: table-cell; 
 
    height:100%; 
 
}

<div class="table"> 
 
    <div class="cell"> 
 
     <p>Text</p> 
 
    </div> 
 
</div> 
 
<div class="table"> 
 
    <div class="cell"> 
 
     <p>Text</p> 
 
    </div> 
 
</div>

使用整潔，但我的div不擴大到視高度的100％。使用檢查員，我找不到任何差異。很明顯，這裏有些事情要做。

有人可以提供正確的標記整齊，讓我實現小提琴？

來源

2015-02-07 master

如果您想通過側兩個div側（如小提琴），只是讓每一個width:50%和float:left

html, body{ 
 
    height:100%; 
 
} 
 

 
.table { 
 
    width: 50%; 
 
    display: table; 
 
    height:100%; 
 
    float:left; 
 
} 
 

 
.cell { 
 
    border: 2px solid black; 
 
    vertical-align: middle; 
 
    display: table-cell; 
 
    height:100%; 
 
}

<div class="table"> 
 
    <div class="cell"> 
 
     <p>Text</p> 
 
    </div> 
 
</div> 
 
<div class="table"> 
 
    <div class="cell"> 
 
     <p>Text</p> 
 
    </div> 
 
</div>

來源

2015-02-07 06:24:13 sideroxylon

我想的div是垂直的，就像小提琴，然而，當我使用純框架與上面的代碼，我不能得到它複製。所以我原來的小提琴和上面的佈局渲染是正確的，但有一個問題，當我嘗試使用整齊。 http://neat.bourbon.io/ – master 2015-02-08 19:56:15

.table { 
    width: 50%; 
    display: table; 
    height:100%; 
    float:left; 
}

這個CSS進行兩次股利由留邊側。您還可以使用

display:inline-block; 
vertical-align:top; 
width:49%;

做出並排佈局; 要居中內容使用margin:0 auto兒童加二等於高度查看端口使用 -

height:100vh

jsfiddle link

來源

2015-02-07 06:37:22 Rasel

與中心的內容

回答

相關問題