title: Vertically centering button using css
body: <p>I am trying to make a simple input button center-align within a table cell.</p>
  
  <p>My markup is:</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;table width="500" border="1"&gt;
    &lt;tr&gt;
      &lt;td width="390"&gt;XXXXXXXXX&lt;/td&gt;
      &lt;td width="110" rowspan="2" valign="middle"&gt;&lt;input type="button" value="submit"&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;YYYYYYYY&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  &lt;br /&gt;&lt;br /&gt;
  &lt;div style="width:500px;"&gt;
    &lt;div style="float:left;width:390px;"&gt;
      &lt;div&gt;XXXXXXX&lt;/div&gt;
      &lt;div&gt;YYYYYYY&lt;/div&gt;
    &lt;/div&gt;
    &lt;div style="vertical-align:middle;width:110px;float:right;"&gt;
      &lt;div&gt;&lt;input type="button" value="submit"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have done a table version showing you the layout that I am trying to achieve.  Note that the text represented by "XXXXX" or "YYYYYY" is of variable length.</p>