Блог

У меня есть динамическая таблица с динамическим номером столбца и строк… В заголовке таблицы мне нужно исправить значок сортировки по вертикали по центру.. Даже размер текста заголовка таблицы является динамическим, и ни одна строка не продолжает увеличиваться… как выровнять значок сортировки по вертикали при увеличении размера текста?

jsfiddle

 <table style="width:100%">
  <tr>
    <th><div class='filter-container header-container'> <div class='header-text'>  Firstname Firstname Firstnam eFirstnam eFirstname Firstname Firstname Firstname Firstname</div><div class='icon-right'> <span    class= "fa fa-sort-asc fa-lg sort-icon "></span><span   class= "fa fa-sort-desc fa-lg sort-icon  "></span></div></div></th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>
  

CSS:

 table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

th, td {
  padding: 5px;
}

.filter-container {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0px !important;
  margin: 0px !important;
}

.header-container {
  height: 100%;
  vertical-align: middle;
  text-align: center;
}

.header-text {
  font-size: 22px;
  line-height: 24px;
  color: #000000;
  font-weight: normal;
  width: 90%;
  float: left;
  letter-spacing: 0;
  text-align: left;
}

.sort-icon {
  float: right !important;
  clear: right;
  height: 1px !important;
}
  

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

 <th>
  <div class="aligner">
    <div class="text">any text here can be as long as you want</div>
    <div class="icon">your icon here</div>
  </div>
</th>
  

и использовать:

 th .aligner {
  display: flex;
  align-items: center;
}
  

Очевидно, что оба выровненных элемента должны иметь равные вертикальные padding , border и margin s.

Используя только что добавленный вами пример, вот начало:https://jsfiddle.net/websiter/h94yen82 /

Я удалил ваши стили для сортировщика и добавил:

 .header-container {
  justify-content: space-between;
}
.sort-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 0;
}
  

Быстро / просто исправить, добавить это в .icon-right :

 .icon-right {
    ...
    top: calc(50% - 8px);
    position: relative;
}
  

Редактировать

Поскольку вы хотите применить это ко всем столбцам, попробуйте следующее:

 .icon-right {/* Add this new class */
    top: calc(50% - 8px);
    position: absolute;
    right: 5px;
}

th {/* Add this new class */
    position: relative;
}

.filter-container {
    ...
    /*position: relative;*/ /* remove this line */
    ...
}
  

Попробуйте jsfiddle.

Как насчет этого?

 .header-container {
  height: 100%;
  vertical-align: middle;
  text-align: center;
  overflow: hidden;
}

.icon-right {
  position: absolute;
  top: 50%;
  right: 0;
  margin-top:-10px;
}
  

https://jsfiddle.net/56y4wmkz/

попробуйте это

  .header-container {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
  

Попробуйте эти свойства, я думаю, это полезно для вас.

 .header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.icon-right {
  margin-top: -15px;
}
  

 table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
}

.filter-container {
	width: 100%;
	height: 100%;
	position: relative;
	padding: 0px !important;
	margin: 0px !important;
}
.header-container {
	height: 100%;
	vertical-align: middle;
	text-align: center;
}

.header-text {
    font-size: 22px;
    line-height: 24px;
}
.header-text {
    color: #000000;
    font-weight: normal;
}

.header-text {
	width: 90%;
	float: left;
	text-align: start;
	letter-spacing: 0;
	text-align: left;
}
.sort-icon {
	float: right !important;
	clear: right;
  height: 1px !important;
}

 .header-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

.icon-right {
    margin-top: -15px;
}  

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<table style="width:100%">
  <tr>
    <th><div class='filter-container header-container'> <div class='header-text'>  Firstname Firstname Firstnam eFirstnam eFirstname Firstname Firstname Firstname Firstname</div>
      <div class='icon-right'> <span    class= "fa fa-sort-asc fa-lg sort-icon "></span><span   class= "fa fa-sort-desc fa-lg sort-icon  "></span></div></div></th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>  

это моя ссылка code pen

https://codepen.io/arshiyakhanam_786/pen/JzyvKe

вы можете использовать преобразование, чтобы выровнять div по вертикали

 .icon-right{
  top: 40%;
  transform: translateY(-40%);
  position: relative;
  line-height: 1.8em;
}
  

Почти ответ: установите высоту двух значков равной 0px или 1px, чтобы сделать две иконки почти, поэтому нельзя щелкнуть для сортировки. Я думаю, вам следует использовать другое рациональное расстояние ширины значка (или изображения) до верха и низа (например fa-caret ). Как насчет этого?

https://jsfiddle.net/2merngco/

Я не знаю, как, но использование абсолютной позиции сработало для меня!

 <th>
 Title <span class="sort-icon"><i class="fa fa-sort"></i></span>
</th>
  

 .sort-icon {
    position: absolute;
}