Spannen am unteren Rand des Displays: Tischzelle und vertikale Ausrichtung

Question

Ich habe ein div, das ich display:table-cell gemacht habe, weil ich die innerhalb vertical-align:middle sein möchte.

Aber wenn meine span, die ich unten an der div möchte, wenn ich dies (geht nach draußen) verschwindet.

Ist dies mit dem aktuellen Code möglich?

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 in Ihrem CSS-Selektor muss .table1 sein, dann Sie relativ-.table1 positioniert werden position: relative-.table1, so dass das absolut positionierte Element hinzufügen wollen . Dann geben die Spanne left: 0 so dass es an der linken Seite des Tisches beginnt statt rechts von der 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>