2017-03-14 90 views
0

我有一個div,這是我製作的display:table-cell,因爲我想pvertical-align:middle裏面。跨度在顯示底部:表格單元格和垂直對齊

但是,當我做這個(走出去)時,我想要在div底部的span消失。

這是可能與當前的代碼?

https://jsfiddle.net/bpuoxsvo/

.table1 
 
{ 
 
    width:100px; 
 
    height:100px; 
 
    display:table; 
 
    background-color:red; 
 
    text-align:center; 
 
} 
 

 
.table1 > p 
 
{ 
 
    display:table-cell; 
 
    vertical-align: middle; 
 
} 
 

 
.table > span 
 
{ 
 
    width: 100%; 
 
    height: 20px; 
 

 
    display:block; 
 
    position:absolute; 
 
    bottom:0; 
 

 
    background-color:blue; 
 
    border-top: 2px solid black; 
 
    border-bottom: 2px solid black; 
 
}
<div> 
 
    <div class="table1"> 
 
    <p> 
 
     Table 1 
 
    </p> 
 
    <span class="color"></span> 
 
    </div> 
 
</div>

+2

這個你要什麼了吧? http://codepen.io/anon/pen/mWMLaZ –

+0

@MichaelCoker是的,謝謝,如果你想你可以發佈它作爲答案,我會接受它。也許一個小解釋也將讚賞:D –

+0

很酷會做,只是不知道這是否是你的最終目標。 –

回答

0

在你的CSS選擇器.table必須.table1,那麼你要添加position: relative.table1使得絕對定位的元素將被定位相對.table1 。然後給跨度left: 0所以它開始在表的左側,而不是對的p

.table1 
 
{ 
 
    width:100px; 
 
    height:100px; 
 
    display:table; 
 
    background-color:red; 
 
    text-align:center; 
 
    position: relative; 
 
} 
 

 
.table1 > p 
 
{ 
 
    display:table-cell; 
 
    vertical-align: middle; 
 
} 
 

 
.table1 > span 
 
{ 
 
    width: 100%; 
 
    height: 20px; 
 

 
    display:block; 
 
    position:absolute; 
 
    bottom:0; 
 
    left: 0; 
 
    background-color:blue; 
 
    border-top: 2px solid black; 
 
    border-bottom: 2px solid black; 
 
}
<div> 
 
    <div class="table1"> 
 
    <p> 
 
     Table 1 
 
    </p> 
 
    <span class="color"></span> 
 
    </div> 
 
</div>