Вертикальное выравнивание по отношению к иконкам и аватаркам на главной, на странице тем, на странице Участники.

Код
Код:
<!-- Вертикальное выравнивание по отношению к иконкам и аватаркам на главной, на странице тем, на странице Участники. © Kolobdur -->
<style>
#pun-index td.tcr, #pun-viewforum td.tcr, 
#pun-searchtopics td.tcr, .intd,
#pun-userlist td.username, #pun-viewforum .tclcon {
  display: grid;
}

.intd {
  grid: auto / auto 1fr;
  align-items: center;
}

#pun-index td.tcr, #pun-viewforum td.tcr, #pun-searchtopics td.tcr {
  align-items: center;
  justify-content: start;
  width: inherit;
  height: 48px; /* меняем высоту на нужную */
}
 
#pun-index td.tcr {
  grid-template:
      "tcr-em tcr-a"
      "tcr-em tcr-span"/ auto auto;
  align-content: center;
}
 
#pun-viewforum td.tcr, #pun-searchtopics td.tcr {
  grid-template:
      "tcr-em tcr-a tcr-span"
	  / auto auto auto;
}

#pun-viewforum .tclcon {
  grid:
      "stickytext closedatafield atopic pagestext"
	  ". . byuser ."
	  / auto auto 5fr 1fr;
}
 
#pun-index td.tcr br, #pun-viewforum td.tcr br, #pun-searchtopics td.tcr br {display: none;}
 
td.tcr em {grid-area: tcr-em;}
td.tcr a {grid-area: tcr-a;}
td.tcr span {grid-area: tcr-span;}
.stickytext {grid-area: stickytext;}
.closedatafield {grid-area: closedatafield;}
.pagestext {grid-area: pagestext;text-align: right;}
.acchide + a, .acchide + span + a, .acchide + span + span + a {grid-area: atopic;}
.byuser {grid-area: byuser;}
 
#pun .punbb .tcr em.user-avatar {
  float: none;
  height: 36px;
  width: 36px;
  margin: 0 9px 0 0;
}

#pun-userlist .main td.username {
  grid: auto / auto 1fr;
  align-items: center;
  width: 100%;
}

.punbb td div.tclcon {margin-left: 8px;}
</style>

Не работает на стилях Classic Dark.. (Classic DarkBlue и т.д.), а также где изменен display в ячейках с табличного..

Ставить НТМЛ верх.

Если высота последней ячейки меньше остальных, находим в коде:

#pun-index td.tcr, #pun-viewforum td.tcr, #pun-searchtopics td.tcr {
  align-items: center;
  justify-content: start;
  width: inherit;
  height: 48px;
}

и меняем высоту на нужную..

Отредактировано kolobdur74 (Чт, 26 Авг 2021 23:18:08)