2017-07-14 49 views
-4

我想使頁面充滿固定表(其中6個)。我用簡單的CSS做了它們,但是我想把它們放在所有設備的中心,並使頁面對所有設備負責。我知道這只是CSS,但我很困惑。居中表和使頁面響應

P.S我來自我的電話,我無法分享我的代碼。

在此先感謝。

+0

您可以使用引導程序。 –

+0

如果你不能分享你的代碼,那麼你不能得到答案。請閱讀此[MCVE] - 它不需要是您的確切代碼,只是足夠的代碼來重現您面臨的問題 – Pete

回答

0

html, body, .container-table { 
 
    height: 100%; 
 
} 
 
.container-table { 
 
    display: table; 
 
} 
 
.vertical-center-row { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<div class="container container-table"> 
 
    <div class="row vertical-center-row"> 
 
     <div class="text-center col-md-4 col-md-offset-4" style="background:red"> 
 
     <table> 
 
<tr> 
 
<th>COL1</th> 
 
<th>COL2</th> 
 
</tr> 
 
<tr> 
 
<td>TD COL1</td> 
 
<td>TD COL1</td> 
 
</tr> 
 
<table> 
 
     </div> 
 
    </div> 
 
</div>

根據您的要求需要使用CSS響應像引導,也可以使用@media屏幕特定設備

@media screen and (min-width: 480px) { 
    table{ 
     //your property; 
    } 
} 
+0

您好朋友。感謝您的回覆。我知道媒體查詢,但問題不是使用mq製作更小的div,而是將div調整到中心 –

+0

如果您不使用bootstrap,則需要手動設計css。 –

+0

我會嘗試引導。我從來沒有用過。謝謝。之後我會更新你。謝謝 –