Centering Issues on Anki cards with specific fields

[gabrielguerin]

Hello Anki community,

I’m having trouble aligning a particular field on my Anki card. I’ve included my HTML code below for reference, and it’s worth mentioning that I use Tailwind for styling. Despite applying text-align: center; in the “Styling” section and using TailwindCSS’s text-center class, the alignment doesn’t hold when I view my cards. Interestingly, it appears centered in the preview pane (screenshot 1), but during study sessions, certain fields default to left alignment (screenshot 2).

Can anyone shed any light on this discrepancy?

Thank you very much!

Back Template:

<div class="p-6">
  <div class="block rounded-lg bg-sky-600 text-center shadow-md">
    <div class="text-white">
      <div class="border-b-2 border-neutral-100 px-6 py-3">
        {{Lesson}}
      </div>
      <div class="p-6">
        <h5 class="mb-2 text-5xl font-medium leading-tight">
          {{Characters}} {{Audio}}
        </h5>
        <p class="mb-4 text-3xl">
          {{Pinyin}}
        </p>
      </div>
    </div>
    <hr id="answer" />
    <div class="block rounded-b-lg bg-white text-center">
      <div class="p-6">
        <h5 class="mb-4 text-4xl font-medium leading-tight text-sky-500">
          {{Translation}}
        </h5>
        <div class="border-t-2 text-xl border-neutral-100 px-6 py-3 text-gray-600">
          {{Notes}}
        </div>
      </div>
    </div>
  </div>
</div>

Styling:

@import url("_tailwind.css");

.replay-button svg {
  display: none;
}
.replay-button:before {
  content: "🔊";
}

.card {
  font-size: 24px;
  background-color: #fff;
  text-align: center;
}

Screenshot 1:

Screenshot 2:

[Danika_Dakika]

I haven’t looked at your code (because I probably couldn’t help with that anyway!), but the difference I see immediately is – #1 is a “generic” preview of the elements on the template – #2 is the view of an actual card with data from an actual note. The first place I would look is that note – I suspect you have left-align html in that field that is taking precedence. Adding/Editing - Anki Manual