CSS垂直对齐：在伪元素和td内容之前

Question

我正在为移动设备创建的Web视图中存在一个非常具体的问题。我在Web视图中有一个table，它在垂直方向上已重新排列以用于智能手机显示。对于重新排列，我隐藏了table标题行，并从原始html元素的:before属性中将列名作为data-label伪元素。

现在的问题是，即使两个元素都浮动在一起，伪元素和td的内容也不会垂直对齐。我确定原因是td元素内的文本长度，但我不知道为什么。

[这里是正在发生的事情的图片：

我的html是这样处理的：

计算出的css代码如下：

1. td样式

2. :before样式

有人可以向我解释为什么会发生这种情况，以及我必须进行哪些更改才能使其按预期运行？

最诚挚的问候

Answer 1

并且您面临此问题的原因是因为您在此之前使用了float样式，才是原因。

index.html

<table class="table table-hover theme-1">
     <thead>
        <tr>
           <th colspan="2">Table 1</th>
        </tr>
    </thead>
    <tbody>
    <tr>
       <td>
        <span>Table col</span>
       </td>                           
    </tr>                                                                                                                                                                          
 </tbody>

请在td单元格中放入span标记，并为其指定最大宽度。就像这样：

max-width: 50%;
display: block;

并且在之前的部分中添加剩余的最大宽度。像这样：

td:before {
        position: absolute;
        content: "shaane shane";
        right: 0;
        max-width: 50%;
        top: 50%;
        transform: translateY(-50%);
        }

P.S。使用position属性进行设置，请不要使用float。