Zentrieren Sie den absoluten Text in einer Tabelle

Question

Ich mache eine Grafik, und ich muss absolute Texte abhängig von Eltern zentrieren, jeder hat eine Idee? Vielen Dank !

Edit: Ich sollte nicht HTML-Code ändern ..

CSS : centering absolute positioned text inside relative parent> arbeiten nicht auf dem Tisch Layout

.graph 
 
{ 
 
    width: 100%; 
 
    height: 400px; 
 
    display: table; 
 
    table-layout: fixed; 
 
    border-collapse: separate; 
 
    border-spacing: 15px; 
 
    font-family: arial; 
 
} 
 

 
.graph > div 
 
{ 
 
    display: table-cell; 
 
    vertical-align: bottom; 
 
    text-align: center; 
 
} 
 

 
.graph > div > div 
 
{ 
 
    animation: graph 0.5s ease-in-out; 
 
    background: #e74c3c; 
 
} 
 

 
.graph > div > span 
 
{ 
 
    position: absolute; 
 
    font-size: 12px; 
 
    color: black; 
 
} 
 

 
@keyframes graph 
 
{ 
 
    0% 
 
    { 
 
     height: 0%; 
 
    } 
 
}

<div class="graph"> 
 
    <div><div style="height:75%;"></div><span>Valeur 1</span></div> 
 
    <div><div style="height:100%;"></div><span>Valeur 2</span></div> 
 
    <div><div style="height:25%;"></div><span>Valeur 3</span></div> 
 
    <div><div style="height:85%;"></div><span>Valeur 4</span></div> 
 
    <div><div style="height:43%;"></div><span>Valeur 5</span></div> 
 
    <div><div style="height:65%;"></div><span>Valeur 6</span></div> 
 
    <div><div style="height:30%;"></div><span>Valeur 7</span></div> 
 
</div>

Answer 1

Sie müssen position:relative; einstellen zu das Elternteil (.graph > div) so die Spannenpositio n es selbst entsprechend

und verwenden Sie left:50; und transform:translateX(-50%); auf die Spanne (.graph > div > span) es zum Zentrum in der Mitte

.graph 
 
{ 
 
    width: 100%; 
 
    height: 400px; 
 
    display: table; 
 
    table-layout: fixed; 
 
    border-collapse: separate; 
 
    border-spacing: 15px; 
 
    font-family: arial; 
 

 
} 
 

 
.graph > div 
 
{ 
 
    display: table-cell; 
 
    vertical-align: bottom; 
 
    text-align: center; 
 
     position:relative; 
 
} 
 

 
.graph > div > div 
 
{ 
 
    animation: graph 0.5s ease-in-out; 
 
    background: #e74c3c; 
 
} 
 

 
.graph > div > span 
 
{ 
 
    position: absolute; 
 
    font-size: 12px; 
 
    color: black; 
 
     left: 50%; 
 
    transform: translateX(-50%); 
 
} 
 

 
@keyframes graph 
 
{ 
 
    0% 
 
    { 
 
     height: 0%; 
 
    } 
 
}

<div class="graph"> 
 
    <div><div style="height:75%;"></div><span>Valeur 1</span></div> 
 
    <div><div style="height:100%;"></div><span>Valeur 2</span></div> 
 
    <div><div style="height:25%;"></div><span>Valeur 3</span></div> 
 
    <div><div style="height:85%;"></div><span>Valeur 4</span></div> 
 
    <div><div style="height:43%;"></div><span>Valeur 5</span></div> 
 
    <div><div style="height:65%;"></div><span>Valeur 6</span></div> 
 
    <div><div style="height:30%;"></div><span>Valeur 7</span></div> 
 
</div>

Answer 2

Sie benötigen CSS-Klasse ändern .graph Es besteht keine Notwendigkeit zu position-obselete gesetzt oder Sie können es zu center ändern

.graph > div > span 
{ 

    font-size: 12px; 
    color: black; 
    text-align: center; 
}