由於顯示在佈局上的差距：表

我有一個困難，其約display:table，我正在一個網頁的網站，我有一個導航欄和.product部分下面，現在.product部分，我有一個旋轉木馬和我想轉盤垂直居中，所以我已經使用下面所述的技術::由於顯示在佈局上的差距：表

@media only screen and (min-width : 768px) { 
    .products { 
     height: 100%; 
     display: table; 
     width: 100%; 
    } 
    .products .carousel-wrapper { 
     display: table-cell; 
     vertical-align: middle; 
    } 
}

FIDDLE HERE

不幸有一個但.product部和之間間隙3210元素，這兩個兄弟元素，如果我添加display:block到產品部分比我的佈局搞砸了，但差距已消失，所以我需要堅持table。爲什麼我已經檢查了保證金和填充的差距，但沒有，所以我沒有看到任何明顯的差距，但它仍然存在。

有人可以告訴我爲什麼我得到這個巨大的差距？

來源

2015-06-26 Tenali_raman

你在你的.navbar類

有margin-bottom: 20px;，你有2個跨，50像素的高度

這就是在撥弄你的差距

你擺弄分叉：http://jsfiddle.net/ej8dtd1z/

來源

2015-06-26 13:40:24 rob

你是絕對正確的移動！ –

你的差距是由於你的2空<span>和你的css規則nav span有：min-height: 50px !important;

爲了解決這個問題，您可以：

取出<span>

AND/OR

添加一個類你的菜單<span>對正確的只是應用您的CSS規則

來源

2015-06-26 13:42:33

我建了一個電網系統基礎上display:table使用下面的代碼：

.products { 
    position: relative;/*you wont need this one*/ 
    display: table; 
    width: 100%; 
    border-collapse: collapse; 
    border-spacing: 0; 
    vertical-align: middle; 
} 

.products > * { 
    display: table-cell; 
    vertical-align: inherit; 
    text-align: center; 
} 

.youritems { 
    vertical-align: inherit; 
    display: inline-block; 
    min-height: 1px; 
}

首先你建一個表，然後用裏面的CSS .youritems元素將很容易與text-align和vertical-align

來源

2015-06-26 13:51:57 Taurus

真棒，但我敢打賭它沒有反應。：D但這是一個非常好的主意。 –

它反應迅速，實際上它是一個3格的系統，：P，謝謝 – Taurus

很想看到一個dmo真的，如果你有的話！ –

由於顯示在佈局上的差距：表

回答

相關問題