Can text input be centered?

Anki Desktop
1

Can the (cursor position/input location) to be centered in the text box for the {{type:Back}} control?

When I add [<text-align: center;>] under/after the [greater-than-sign br less-than-sign] control before the [{{type:Back}}] control, it displays the “answer” centered in the input box instead of centering the cursor/input position in a blank input text box.

Thanks, Tracey
BTW, in the preview, the word “example” is spelt “exomple” :wink:

2

You are probably confusing HTML and CSS. HTML is responsible for the structure of your document, through a tag system (tags are the things like <br>). CSS is responsible for the styling. CSS rules are of the form property: value;. It’s important to note that HTML and CSS are in two separate documents (although it’s possible to inject some CSS directly into an HTML document).

Back to your problem: you need to add the following in the Styling section of your card template.

input {
    text-align: center;
}

This will make every input box have the text centered, including those that Anki produces when you put {{type:Back}}.

This is made on purpose, to show the colour code Anki uses for mistakes.

5 Likes
3 
.card {
  font-family: arial;
  font-size: 20px;
  text-align: center;
  color: black;
  background-color: white;
  input {text-align: center;}
}

I pasted-in the last line (with and without curly braces) in the styling section and the input “cursor position” is still left justified.

Anki input works as is and centering of the cursor is just for aesthetic purposes.

Are there any other changes that need to be made (like to the front card, styling properties, etc.)?

Please advise.
Thanks, Tracey

4

The snippet has to be added at the end of the Styling section, after the .card { ... }:

.card {
  font-family: arial;
  font-size: 20px;
  text-align: center;
  color: black;
  background-color: white;
}

input {
  text-align: center;
}
2 Likes
5

Thanks, that worked great, Tracey