ディスプレイの下部のスパン：テーブルセルと垂直のアラインメント

Question

をvertical-align:middleにしたいので、私はdisplay:table-cellを作成しました。

しかし、私がこれを行うときに私がdivの底に欲しい私のspanが消えてしまうと（外に出る）。

これは現在のコードで可能ですか？あなたのCSSセレクタで

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>

Answer 1

.table.table1にする必要がある、あなたは絶対位置の要素が.table1から相対に配置されるように.table1にposition: relativeを追加します。次に、表の左側に代わりの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>