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

【问题标题】：Center align absolute text in a table居中对齐表格中的绝对文本
【发布时间】：2017-11-11 19:45:58
【问题描述】：

我正在制作一个图表，我需要根据父级将绝对文本居中对齐，有人知道吗？谢谢！

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

CSS : centering absolute positioned text inside relative parent > 不处理表格布局

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

【问题讨论】：

标签： html css graph absolute text-align

【解决方案1】：

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

并使用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>

【讨论】：

【解决方案2】：

您需要更改 .graph css 类无需将position设置为obselete，也可以改为center

.graph > div > span
{

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

【讨论】：

感谢回复！但在上下文中，这些标签必须是绝对的！无论如何，Chiller 找到了解决方案 :)