table 中的绝对文本居中对齐

Question

我正在制作图表，我需要根据父级居中对齐绝对文本，有人有想法吗？谢谢！

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

CSS : centering absolute positioned text inside relative parent > 无法处理 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

您需要将 position:relative; 设置为父级 (.graph > div)，以便跨度根据它自行定位

并使用left:50;和transform:translateX(-50%)；在跨度 (.graph > div > span) 上使其居中

.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

您需要更改 .graph css class position不需要设置为obselete，也可以改成center

.graph > div > span
{

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

table 中的绝对文本居中对齐

Center align absolute text in a table

html

css

text-align

graph

absolute