# Help with centering text in lists (like the old versions)

**URL:** <https://forums.ankiweb.net/t/help-with-centering-text-in-lists-like-the-old-versions/35755>\
**Category:** Card Design\
**Created:** [October 14, 2023, 8:14pm UTC](https://forums.ankiweb.net/t/help-with-centering-text-in-lists-like-the-old-versions/35755 "2023-10-14T20:14:34Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Spatzle](https://avatars.discourse-cdn.com/v4/letter/s/258eb7/32.png) [@Spatzle](https://forums.ankiweb.net/u/Spatzle)\
**Post date:** [October 14, 2023, 8:14pm UTC](https://forums.ankiweb.net/t/help-with-centering-text-in-lists-like-the-old-versions/35755/1 "2023-10-14T20:14:34Z")

</div>

Hello everyone, I have recently updated from 2.1.49 to the most recent Anki version. I’m just having a bit of an issue: In my dear 2.1.49, having lists in a card would default to something like this:

 ![immagine](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/3X/c/4/c46ad2b9c9b65a729d23b1217986fd477739c829.jpeg)  
I’ve grabbed this picture from this forum, ironically from someone who wants to change how it looks. But I like this way of displaying lists centered more than the one in current Anki (Qt6):  
 ![immagine](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/3X/4/b/4b7b78ac58bd000fe87fe80db756d03463175b65.png)  
As you can see lists default to the be aligned to the left, which I find worse than the old centered list. I can solve this problem using formatting buttons easily:  
 ![immagine](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/3X/8/c/8cfbf3e681b72c4e2d27e876869881dc87b177aa.png)  
but I’d prefer if lists were centered by default, because manually centering them each card I make (and I use lists a whole lot) would get annoying. I couldn’t figure out a way to do this in the styiling, but I’m awful at it.

---

<div class="post-metadata">

**Author:** ![hkr](https://avatars.discourse-cdn.com/v4/letter/h/c6cbf5/32.png) [@hkr](https://forums.ankiweb.net/u/hkr)\
**Post date:** [October 14, 2023, 10:55pm UTC](https://forums.ankiweb.net/t/help-with-centering-text-in-lists-like-the-old-versions/35755/2 "2023-10-14T22:55:09Z")

</div>

If you want the list elements to look like the old versions, try adding the following to the _Styling_ section:

```css
li {
    text-align: center;
}

```

Alternatively, it might look nicer to center the entire `<ul>` or `<ol>` block and left-align the individual items inside that block.

```css
:not(li, ul, ol) > ul,
:not(li, ul, ol) > ol {
    width: fit-content;
    margin: 0 auto;
}

li {
    text-align: start;
}

```

Screenshot:

 ![centered-list](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/3X/8/3/8302410c5b8932f9369f9d01784967d6976e2c27.png)

Related discussion: [Align list items by default · Issue #1801 · ankitects/anki · GitHub](https://github.com/ankitects/anki/issues/1801)

---

<div class="post-metadata">

**Author:** ![Spatzle](https://avatars.discourse-cdn.com/v4/letter/s/258eb7/32.png) [@Spatzle](https://forums.ankiweb.net/u/Spatzle)\
**Post date:** [October 15, 2023, 1:07pm UTC](https://forums.ankiweb.net/t/help-with-centering-text-in-lists-like-the-old-versions/35755/3 "2023-10-15T13:07:21Z")

</div>

First of all, thanks a lot for your post. The first css line fixes what I was talking about, which is great! I would be satisfied with that alone, but honestly the second styiling you posted, as you said, just looks nicer. But I just can’t get it to work. I don’t know what I’m doing wrong (I’m now using the Qt5 version, by the way). Maybe I misinterpreted what you meant by “left-align the individual items inside that block”. Were you explaining what the code does or there’s something else I have to do?

 ![immagine](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/3X/9/f/9f7a9c7ddfdf1ba0a5f91325635cfbc824eff833.png)

---

<div class="post-metadata">

**Author:** ![Spatzle](https://avatars.discourse-cdn.com/v4/letter/s/258eb7/32.png) [@Spatzle](https://forums.ankiweb.net/u/Spatzle)\
**Post date:** [October 15, 2023, 1:10pm UTC](https://forums.ankiweb.net/t/help-with-centering-text-in-lists-like-the-old-versions/35755/4 "2023-10-15T13:10:51Z")

</div>

Nevermind!  
I’ve copied some code from the github discussion you linked and that did the trick. The code in question was:

```auto
#qa > ul, #qa > ol {
  width: fit-content;
  margin: 0 auto;
  text-align: start;
}

```

---

<div class="post-metadata">

**Author:** ![hkr](https://avatars.discourse-cdn.com/v4/letter/h/c6cbf5/32.png) [@hkr](https://forums.ankiweb.net/u/hkr)\
**Post date:** [October 15, 2023, 4:41pm UTC](https://forums.ankiweb.net/t/help-with-centering-text-in-lists-like-the-old-versions/35755/5 "2023-10-15T16:41:03Z")

</div>

> [@Spatzle](#):
>
> (I’m now using the Qt5 version, by the way).

It looks like the version of Chromium in QT5 is too old to support a selector list argument of `:not()`. See [selector list argument of :not() | Can I use... Support tables for HTML5, CSS3, etc](https://caniuse.com/css-not-sel-list) . The following should work in both Qt5 and QT6 versions.

```css
:not(li):not(ul):not(ol) > ul,
:not(li):not(ul):not(ol) > ol {
    width: fit-content;
    margin: 0 auto;
}

li {
    text-align: start;
}

```

* * *

> [@Spatzle](#):
>
> `#qa > ul, #qa > ol {`

Just for your information, this will only work if the `<ol>` or `<ul>` element is the top level element of the card. In other words, as mentioned in the discussion above, it will not work if the field is surrounded by a `<div>`, for example, as shown below:

```html
<div>{{Front}}</div>

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/1X/8f1279ababc5879d54e4838989f606cfe55af8c7.jpeg) [@system](https://forums.ankiweb.net/u/system)\
**Post date:** [November 14, 2023, 4:41pm UTC](https://forums.ankiweb.net/t/help-with-centering-text-in-lists-like-the-old-versions/35755/6 "2023-11-14T16:41:54Z")

</div>

Closed on November 14, 2023, 4:41pm UTC

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.