居中对齐表格中的绝对文本

Question

我正在制作图表，我需要根据父母对齐绝对文本，任何人都有想法？谢谢！

编辑：我不应该更改HTML代码..

CSS : centering absolute positioned text inside relative parent＆gt;不适用于表格布局

.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

您需要将position:relative;设置为父级（.graph > div），以便根据它自定位位置

并使用left:50;和transform:translateX(-50%);在跨度（.graph > div > span）上将其置于中间

＆＃13;

＆＃13;

.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%;
   }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您需要更改.graph css类 无需将center设置为.graph > div > span { font-size: 12px; color: black; text-align: center; } ，也可以将其更改为{{1}}

{{1}}