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 How to increase avatars size on Latest without making them blurred 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
image.png2215×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

三年了还没找到解决方案 :laughing: 找别人看过，他们也搞不清楚 :man_shrugging:

5

在 <td> 上使用 display: flex，不添加一些 HTML 可能无法实现 :thinking:

如果从 .td.posters 中移除 display: flex，它将垂直居中头像，无论行高如何。

但是，包含头像的单元格 .topic-list .posters.theme-avatar-medium 宽度固定（176px），有点太短了，最后一个头像会换行。如果将其增加到 187px，似乎就能容纳。

然后，头像的高度将不完全一致，因为第一个头像较大，可以通过以下方式解决：

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

image
image1139×1101 212 KB

1 个赞