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>
</ol>
</div>
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%;
}
}
I have so much content on my cards in the HTML editor that I’m unsure what you mean by add a
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:
some text.
<div class="wrapper"> and </div> tags.<div class="wrapper">some text</div>.
<div class="wrapped"> and </div> tags.<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!
