title: Anki CSS/HTML align vertically to bottom / center / top
body: <p>I am editing the template of an <a href="https://ankiweb.net/shared/info/1956010956" rel="nofollow noreferrer">Anki deck</a>, which uses HTML and CSS. What I would like to do here is on the front side, vertically aligning the Japanese character to the middle and the hint to the bottom. I tried manually spacing everything with <code>&lt;br&gt;</code>, but then it doesn't work in different resolution windows (and is just a dirty solution) <a href="https://i.stack.imgur.com/TCRtU.png" rel="nofollow noreferrer">Front example</a>. </p>
  
  <p>On the back side I would like to make the stroke diagram always snap to the top, the Japanese character with keyword and mnemonic in the middle, and the rest on the bottom. If I  tried spacing this with <code>&lt;br&gt;</code> I would get the same problem as on the front page, plus the mnemonic is sometimes 1 line, but can also be 5+ lines so it would have to be aligned dynamically to work even if the window size was always the same <a href="https://i.stack.imgur.com/zlA2C.png" rel="nofollow noreferrer">Back example with arrows</a>. </p>
  
  <p>I already found <a href="https://stackoverflow.com/questions/585945/how-to-align-content-of-a-div-to-the-bottom#">this</a> question which seems to somewhat answer my question, but as I know practically nothing about CSS/HTML I don't know how to apply it in my case. If you could help me I would greatly appreciate it as I spend a lot of time with this deck and it keeps annoying me, I would also share the improved version for other people to use.</p>
  
  <p>Here is the code for the front</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="front" lang="ja"&gt;
  
  
  &lt;span class="large japanese"&gt;{{kanji}}&lt;/span&gt;
  
  &lt;br&gt;
  &lt;hr&gt;
  
  
  {{hint:Memory palace}}</code></pre>
  </div>
  </div>
  
  back </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="back" lang="ja"&gt;
  {{strokeDiagram}}&lt;br&gt; &lt;br&gt;
   &lt;hr&gt; 
   &lt;span class="medium"&gt;&lt;a href="http://jisho.org/kanji/details/{{kanji}}"&gt;{{keyword}}&lt;/a&gt;&lt;/span&gt;
   &lt;br/&gt;&lt;br/&gt;
   
  &lt;span class="large japanese"&gt;{{kanji}}&lt;/span&gt;
  
  &lt;br&gt; 
  &lt;span class="medium"&gt;{{myStory}}&lt;/span&gt;  &lt;br&gt;&lt;hr&gt; 
  &lt;span class="tiny"&gt; Memory palace: {{Memory palace}}&lt;/span&gt;
  
  
  &lt;span class="tiny"&gt; &amp;nbsp; Frame: {{frameNoV6}} &amp;nbsp; Strokes: {{strokeCount}} &amp;nbsp; &amp;mdash; &amp;nbsp; Jouyou Grade: {{jouYou}} &amp;nbsp; JLPT: {{jlpt}}&lt;/span&gt;&lt;br/&gt;
  
  &lt;!-- Uncomment for Heisig Story          
  &lt;hr&gt;
   &lt;span class="medium"&gt;{{heisigStory}}&lt;/span&gt;
   {{#heisigComment}}&lt;br/&gt;&lt;br/&gt;&lt;span class="small"&gt;{{heisigComment}}&lt;/span&gt;{{/heisigComment}}
  --&gt;
  
  &lt;!-- Uncomment for koohi Story
  &lt;hr/&gt;
   &lt;span class="medium"&gt;{{koohiiStory1}}&lt;/span&gt;
  
  --&gt;
  
  &lt;hr/&gt;
   &lt;br&gt; &lt;br&gt;
  &lt;!-- Uncomment for On-Yomi and Kun-Yomi
   &lt;span class="small"&gt;On-Yomi: &lt;span class="medium japanese"&gt;{{onYomi}}&lt;/span&gt; &amp;nbsp; Kun-Yomi: &lt;span class="medium japanese"&gt;{{kunYomi}}&lt;/span&gt;&lt;/span&gt;&lt;br/&gt;
  --&gt;
  &lt;span class="tiny"&gt;&lt;a href="http://kanji.koohii.com/study/kanji/{{kanji}}"&gt;Constituents:&lt;/a&gt; {{constituent}}&lt;/span&gt;&lt;br/&gt;&lt;br/&gt;
   {{#readingExamples}}&lt;span class="tiny"&gt;Examples: &lt;span class="japanese"&gt;{{readingExamples}}&lt;/span&gt;&lt;/span&gt;{{/readingExamples}}
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  
   and the styling, </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div.front, div.back {
   text-align: center;
   font-family: sans-serif;
   font-size: 16px; /* line height is based on this size in Anki for some reason, so start with the smallest size used */
  
  }
  
  
  span.tiny {font-size: 16px;}
  span.small {font-size: 24px;}
  span.medium {font-size: 32px;}
  span.large {font-size: 96px;}
  span.italic {font-style: italic;}
  
  .win .japanese {font-family: "Meiryo", "MS Mincho";}
  .mac .japanese {font-family: "Hiragino Mincho Pro";}
  .linux .japanese {font-family: "Kochi Mincho";}
  .mobile .japanese {font-family: "Motoya L Cedar", "Motoya L Maru", "DroidSansJapanese", "Hiragino Mincho ProN";}</code></pre>
  </div>
  </div>
  </p>