# Center td.posters container

**URL:** <https://meta.discourse.org/t/center-td-posters-container/106428>\
**Category:** Support\
**Created:** [13 januari 2019 om 17:00 UTC](https://meta.discourse.org/t/center-td-posters-container/106428 "2019-01-13T17:00:38Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![davidkingham](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidkingham/32/119528_2.png) [@davidkingham](https://meta.discourse.org/u/davidkingham)\
**Post date:** [13 januari 2019 om 17:00 UTC](https://meta.discourse.org/t/center-td-posters-container/106428/1 "2019-01-13T17:00:38Z")

</div>

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](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:

```plaintext
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](https://community.naturephotographers.network/latest).

 ![image](https://global.discourse-cdn.com/meta/original/3X/c/e/ce2aaf9b5f2533b04ef25f82d27083f3d5b870da.png)

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!

---

<div class="post-metadata">

**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
**Post date:** [13 januari 2019 om 22:25 UTC](https://meta.discourse.org/t/center-td-posters-container/106428/2 "2019-01-13T22:25:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)\
**Post date:** [25 december 2021 om 14:41 UTC](https://meta.discourse.org/t/center-td-posters-container/106428/3 "2021-12-25T14:41:59Z")

</div>



---

<div class="post-metadata">

**Author:** ![davidkingham](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidkingham/32/119528_2.png) [@davidkingham](https://meta.discourse.org/u/davidkingham)\
**Post date:** [25 december 2021 om 22:52 UTC](https://meta.discourse.org/t/center-td-posters-container/106428/4 "2021-12-25T22:52:17Z")

</div>

Still haven’t found a solution to this 3 years later 😆 Had someone else look at it but they couldn’t figure it out eithier 🤷‍♂️

---

<div class="post-metadata">

**Author:** ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)\
**Post date:** [25 december 2021 om 23:19 UTC](https://meta.discourse.org/t/center-td-posters-container/106428/5 "2021-12-25T23:19:16Z")

</div>

With a `display: flex` on the `<td>`, I’m not sure this is possible without adding a bit of HTML 🤔

If you remove the `display: flex` from `.td.posters`, it will vertically center the avatars, regardless of the row height.

However, the cell containing the avatars `.topic-list .posters.theme-avatar-medium`, which has a fixed width, is a bit too short (176px) and the last avatar will go to a new line. If you increase it to 187px, it seems to fit.

Then, the avatars won’t be exactly at the same height because the first one is larger, which can be solved by:

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

```

 ![image](https://global.discourse-cdn.com/meta/original/3X/5/d/5d0d5c7c1b8c580141655950d9c629bf4219c0da.png)