Html 将垂直图表转换为水平图表CSS3

我正在尝试将水平图表转换为垂直图表。不过我遇到了一个问题。当我将代码更改为水平时，我不能得到连接到框中的行出现在中间。我可以让盒子水平显示

我的代码：

<div class="container">
    <table class="boxplot">
      <tr height="40">
        <td class="line boxplot-max"></td>
        <td class="boxplot-max"></td>
        <td class="boxplot-q3" colspan="4"></td>
        <td class="boxplot-mdn" colspan="4"></td>
        <td class="line boxplot-q1"></td>
        <td class="boxplot-q1"></td>
      </tr>
    </table>
</div>

---

“出现在中间”？它们应该是水平和垂直居中的吗？@isherwood是的，就像CodePen中的真实演示一样，你需要更多的标记。不能将表格单元格垂直居中。是否每个元素都必须是表组件？@isherwood如果不在表中，它可以在divs中