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

[Spatzle]

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:

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):

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:

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.

[hkr]

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

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.

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

li {
    text-align: start;
}

Screenshot:

Related discussion: Align list items by default · Issue #1801 · ankitects/anki · GitHub

[Spatzle]

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?

[Spatzle]

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

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

[hkr]

@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 . The following should work in both Qt5 and QT6 versions.

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

<div>{{Front}}</div>