CSS вертикальное выравнивание: перед псевдоэлементом и тд контентом

Question

У меня очень специфическая проблема в веб-представлении, которое я создаю для мобильных устройств. У меня есть table в веб-представлении, которое переставлено по вертикали для дисплеев смартфонов. Для перестановки я скрываю строку заголовка table и беру имя столбца как псевдоэлемент :before из атрибута data-label исходного элемента html.

Теперь проблема в том, что псевдоэлемент и содержимое td не будут выровнены по вертикали, даже если оба элемента плавают противоположно. Я уверен, что причина в длине текста в элементе td, но я не знаю почему.

Вот картина того, что происходит:

Мой HTML обрабатывается следующим образом:

Вычисляется следующий код CSS:

1. td Стиль

:before Стиль

Может кто-нибудь объяснить мне, почему это происходит и что я должен изменить, чтобы заставить его функционироватькак это должно быть?

С уважением

Answer 1

Набор

td { vertical-align: middle }

Answer 2

Я сам нашел решение ...

На самом деле проблема заключалась в компиляции синтаксиса бритвы .cshtml.

Поскольку эти поля даты были помещены в оператор ac # if, я отформатировал код как обычно:

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

Проблема с текстовой идентификацией и разрывами строк для чистого кода здесь.

Компилятор бритвы вставил разрыв для этих частей. Проблема может быть исправлена ​​с помощью следующей разметки бритвы:

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

Answer 3

Причина, по которой вы столкнулись с этой проблемой, заключается в том, что вы используете стиль с плавающей точкой в ​​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>

Пожалуйста, поставьте span пометьте в ячейке td и дайте ей максимальную ширину. Например:

max-width: 50%;
display: block;

И в разделе перед добавьте оставшуюся максимальную ширину. Например:

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

PS Установите его, используя атрибут position , пожалуйста, не используйте float .