Center-left alignment for Cloze deletion

Hey there,

I would really appreciate it if anyone could help me figure out how to make my cloze deletion cards (that are aligned in the center) still be evenly aligned from the left-center. I have seen this done with just front-back card styles but none with cloze deletion. I would really appreciate the help.
Thank you

I have some styling that does this for lists (because center-aligned list are very ugly).
In the Styling tab of Cards, add this

.wrapper {
  text-align: center;

.wrapped {
  display: inline-block;
  text-align: left;

Then, if you want to have left-centered content, switch to HTML editor (Ctrl+Shift+x) when editing a field, then wrap the content with a <div class="wrapper">, and inside add a <div class="wrapped">. The left-centered content should be inside the wrapped <div>, whereas any text that should be centered as usual, but aligned with the left-centered text should be outside that <div>.
For example,

Here are some things to remember
<div class="wrapper">
  <ol class="wrapped">
    <li>{{c1::Carrots are orange}}.</li>
    <li>{{c2::But apples are not}}.</li>

You may notice that I have replaced the second div with a ol (ordered list): any tag will serve the purpose.


I have added that to my styling and it didn’t seem to change anything. I will upload what I have. I also attempted to do what you said in the HTML editor but I am very lost in that aspect. Thank you for helping me, I really appreciate this.

If you want to have all content nicely centered, you can use the following CSS:

/* center #qa inside .card (the body)  */
.card {
  /* other definitions (font-size etc.) */
  text-align: center;

/* make #qa (child of .card) centerable */
/* and left-aligned */
#qa {
  display: inline-block;
  text-align: left;

/* for landscape orientation */
/* only use part of the available width */
@media (min-width: 992px) {
  #qa {
    max-width: 80%;
@media (min-width: 1366px) {
  #qa {
    max-width: 66%;
1 Like

I have so much content on my cards in the HTML editor that I’m unsure what you mean by add a

inside… I’m pretty lost here.

would you be able to upload a screenshot so I can see exactly how you have it? because I have tied this and for some reason it still isn’t working.

I’m not familiar/comfortable with HTML or what CSS really is. I understand the basics of how to edit the cards but I’m in biomedical sciences and have no clue how to code. I’ve tried to copy and paste what y’all have advised but I still have no luck. Could you please help me? @BlackBeans @kleinerpirat

Here are the steps. Tell me which one you don’t understand / don’t achieve to carry out.
When editing a certain field:

  • Press the </> button (shortcut Ctrl+Shift+x).
    • the font should have changed (monospace, smaller)
    • the background color should have changed
    • you should see more things than before (at least as much), maybe cluttered
    • the lines should be numbered
  • Locate the text that you want to be left-centered.
    It might look like some text.
  • Enclose it with <div class="wrapper"> and </div> tags.
    The result should be <div class="wrapper">some text</div>.
  • Enclose the inner text with <div class="wrapped"> and </div> tags.
    The result should be <div class="wrapper"><div class="wrapped">some text</div></div>.

Here is a quick recap of the very basics of what changes when you switch to HTML editor.

Normal Editor HTML Editor
Newline, linefeed, carriage return <br> or enclosing <p> tags
Nothing newline
Italic enclosing <i> tags
Bold enclosing <b> tags

Also, "something enclosed in <p> tags" means “<p>something</p>”.


In case you want to try out my suggestion:

You can access the template editor with the “Cards…” button (or by pressing Ctrl+L) in the note editor.

In case you’re wondering which “nodes” we’re styling here, here’s the HTML structure of an Anki card:


The green is the content of the card.


Thank you so much!