Center td.posters container

Поддержка
1

I could use a little css/flex assistance. I have been working on making the avatar of the original poster larger than the rest of the avatars and have figured everything out except how to center td.posters

I have used the method described here https://meta.discourse.org/t/how-to-increase-avatars-size-on-latest-without-making-them-blurred/89606 and modified it work with the original rather than latest. Here is my css:

td > a:first-child > img:first-child {
    height: 50px;
    width: 50px;
    margin-right: 3px;
}
  
td.posters {
    display: flex;
    align-items: center;
    margin-right: 25px;

  img.avatar {
    height: 25px;
    width: 25px;
  }
}

.topic-list .posters a:first-child .avatar.latest:not(.single) {
    top: 1px;
    bottom: 1px;
}

.topic-list td.posters {
        height: 54px;
}

Below I marked what I want to be centered between the dashed arrows. Here’s a link to my site.

image
image2215×765 487 KB

I tried increasing the height of td.containers, but that only works on categories where I’m using the topic previews, in other categories where that is turned off it makes the spacing too large. I could target those categories to reduce the height but would prefer not to if there is an easier way. Thanks!

2

You may wish to hire someone experienced with CSS to assist you?

4

Так и не нашли решения за эти 3 года :laughing: Показывали кому-то ещё, но и они не смогли разобраться :man_shrugging:

5

При display: flex на теге <td>, я не уверен, что это возможно без небольшого изменения HTML :thinking:

Если вы уберете display: flex из .td.posters, аватарки будут вертикально центрированы независимо от высоты строки.

Однако ячейка с аватарками .topic-list .posters.theme-avatar-medium, имеющая фиксированную ширину, немного слишком узкая (176px), из-за чего последняя аватарка переносится на новую строку. Если увеличить ширину до 187px, всё, похоже, встанет на свои места.

Тогда аватарки не будут находиться на одной высоте, так как первая из них больше. Это можно исправить так:

.topic-list .posters>a:first-child {
    margin-top: -4px;
}

image
image1139×1101 212 KB