Center td.posters container

Unterstützung
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

Immer noch keine Lösung dafür gefunden, 3 Jahre später :laughing: Hat jemand anderes draufgeschaut, aber sie konnten es auch nicht herausfinden :man_shrugging:

5

Mit display: flex auf dem \u003ctd\u003e bin ich mir nicht sicher, ob das ohne ein wenig HTML möglich ist :thinking:

Wenn Sie display: flex von .td.posters entfernen, werden die Avatare vertikal zentriert, unabhängig von der Zeilenhöhe.

Die Zelle, die die Avatare enthält .topic-list .posters.theme-avatar-medium, die eine feste Breite hat, ist jedoch etwas zu kurz (176px) und der letzte Avatar wird in eine neue Zeile verschoben. Wenn Sie sie auf 187px erhöhen, scheint es zu passen.

Dann werden die Avatare nicht genau auf gleicher Höhe sein, da der erste größer ist, was gelöst werden kann durch:

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

image
image1139×1101 212 KB

1 „Gefällt mir“