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

<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