Centre aligner le texte absolu dans un tableau

Question

Je fais un graphique, et je dois centrer aligner les textes absolus selon le parent, quelqu'un a une idée? Merci !

Edit: Je ne devrais pas modifier le code html ..

CSS : centering absolute positioned text inside relative parent> ne fonctionne pas sur la mise en page de table

.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

Vous devez définir position:relative; à le parent (.graph > div) de sorte que le span positio n-il selon lui

et d'utiliser left:50; et transform:translateX(-50%); sur la durée (.graph > div > span) pour le centre au milieu

.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

Vous devez changer .graph classe css Il n'y a pas besoin de mettre position-obselete ou vous pouvez le modifier à center

.graph > div > span 
{ 

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