CSS :before 伪元素和 td 内容的垂直对齐

Question

我在为移动设备创建的 Web 视图中遇到了一个非常具体的问题。我在 webview 中有一个 table，对于智能手机显示，它是垂直的 re-arranged。对于 re-arrange，我隐藏了 table 标题行，并将列名作为 :before 伪元素，来自原始 html 元素的 data-label 属性。

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

这是发生了什么的图片：

我的html是这样处理的：

计算的 css 代码如下：

td风格

:before风格

任何人都可以向我解释为什么会发生这种情况以及我必须进行哪些更改才能使其发挥应有的作用？

此致

Answer 1

您遇到此问题的原因是您在 td:before.

中使用了浮动样式

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.Like this :

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.

Answer 2

设置

td { vertical-align: middle }

Answer 3

我自己找到了解决方案...

问题实际上是 .cshtml razor 语法编译。

因为这些日期字段被放置在 c# if 语句中，所以我像往常一样格式化代码：

@if(startDate != DateTime.MinValue)
{
  <td class="ta-left" data-label="Start">@startDate</td>
}

这里的文本标识和干净代码的换行符是问题所在。

razor 编译器为这些部分插入了一个中断。使用以下剃须刀标记可以解决该问题：

@if(startDate != DateTime.MinValue){<td class="ta-left" data-label="Start">@startDate</td>}

CSS :before 伪元素和 td 内容的垂直对齐

CSS vertical alignment of :before pseudo element and td content

html

css

alignment

pseudo-element

media-queries