Вертикальное выравнивание диапазона в TD

Question

Я столкнулся с некоторыми проблемами с CSS-форматированием столбцов таблицы с помощью бутстрапа. Нормальный td выглядит следующим образом:

<td style="vertical-align: middle; font-size: 10px;"> 
<span class="edit-icon glyphicon glyphicon-pencil" style="vertical-align: top !important;"></span> 
Content 
</td> 

С edit-icon класса выглядит как:

.edit-icon { 
    float: right; 
    padding-top: 3px; 
    padding-right: 3px; 
} 

В идеале, содержание в клетке должно быть по центру по вертикали и значок должен находиться в правом верхнем углу. Я пробовал в течение нескольких часов, но безрезультатно, чтобы выяснить, как выровнять один элемент по центру по вертикали и один элемент вверх по вертикали в одной и той же ячейке.

Чтобы дополнительно отобразить эту проблему, вот нынешний вид:

Вот что я ищу:

Любая помощь с тем, как решить этот CSS-головоломка была бы очень признательна!

Answer 1

Единичная ячейка

Один из способов сделать это, чтобы сделать положение диапазона абсолютной. См. this fiddle.

Изменения (высота и ширина только для демонстрации):

CSS:

table 
{ 
    position:relative;   
} 
td 
{  
    height:300px; 
    width:300px; 
    background-color:grey;   
} 
span 
{ 
    top:5px; 
    right:5px; 
    position:absolute; 
    height:100px; 
    width:100px; 
    background-color:red;  
} 

HTML:

<table> 
    <td style="vertical-align: middle; font-size: 10px;"> 
     <span class="edit-icon glyphicon glyphicon-pencil"> </span> 
     Content 
    </td> 
</table> 

Положение таблицы относительна, так что это положение, из-за которого пролет будет основывать свое абсолютное положение.

Несколько клеток

Теперь, единственная проблема в том, что она не работает так хорошо, когда у вас есть несколько ячеек таблицы, так как изображение будет всегда использовать таблицу для точки смещения. Таким образом, вам нужно сделать положение относительно td. Однако это не просто. См. here, чтобы сделать это. По сути, это включает в себя добавление другого div внутри td, который заполняет td, а затем использует это для позиции. Кроме того, вы хотите сохранить центральный текст. См. here для обсуждения центрирования по вертикали. Другой подход - установить ячейку таблицы в положение block. Однако, если вы это сделаете, вы потеряете вертикальное центрирование текста. Хорошим решением является использование преобразования (обратите внимание на поддерживаемые браузеры на mdn).

This fiddle показывает, что он работает для нескольких ячеек таблицы. В основном: -

• tddisplay:block означает, что она может быть относительной точкой.
• .content обертывает текст, который должен быть центрирован по вертикали.
• transform сдвигает содержимое на половину его высоты от центра td, так что он находится посередине.

CSS:

td 
{ 
    position:relative; 
    display:block; 
    height:300px; 
    width:300px; 
    background-color:grey;  
} 

span 
{ 
    position:absolute; 
    top:5px; 
    right:5px;  
    height:100px; 
    width:100px; 
    background-color:red;  
} 

.content 
{ 
    position:absolute; 
    top:50%; 
    -webkit-transform:translateY(-50%); 
    transform:translateY(-50%); 
} 

HTML:

<table> 
    <tr> 
     <td style="font-size: 10px;">    
       <span class="edit-icon glyphicon glyphicon-pencil"> </span> 
      <div class="content"> 
       <p>Content</p> 
       <p>More content</p> 
       <p>Even more content</p> 
       <p>So much more content</p>    
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td style="font-size: 10px;">    
       <span class="edit-icon glyphicon glyphicon-pencil"> </span> 
      <div class="content"> 
       <p>Content</p> 
       <p>More content</p> 
       <p>Even more content</p> 
       <p>So much more content</p>    
      </div> 
     </td> 
    </tr> 
</table>