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

3年経っても解決策が見つかりません :laughing: 他の人にも見てもらいましたが、彼らも解決できませんでした :man_shrugging:

5

\u003ctd\u003e に display: flex を適用すると、HTML を追加しない限り、これが可能かどうかはわかりません :thinking:

.td.posters から display: flex を削除すると、行の高さに関係なく、アバターが垂直方向に中央揃えされます。

ただし、アバターを含むセル .topic-list .posters.theme-avatar-medium は、固定幅（176px）が少し短いため、最後のアバターが新しい行に移動します。これを 187px に増やすと、収まるようです。

次に、最初のアバターが大きいため、アバターがまったく同じ高さにならないため、これを解決できます。

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

image
image1139×1101 212 KB

「いいね！」 1