title: Why won't "vertical-align middle" work with this table cell?
body: <p>I am beginning a new project and I have vertically-aligned content in <code>&lt;td&gt;</code> cells before, so this error came as a bit unexpected. Also, any research I do (that I have done before, also) yields the information that I would expect (can't apply <code>vertical-align</code> to a block element, apply <code>display: table-cell;</code>, etc.). <em>However:</em></p>
  
  <p>I have the following table in my simple html document:</p>
  
  <pre><code>&lt;table id="headingTable"&gt;
      &lt;tr&gt;
          &lt;td id="dateHolder"&gt;2013-07-24 15:03:18&lt;/td&gt;
          &lt;td&gt;&lt;h2&gt;City of Okmulgee Authorized Leave Request&lt;/h2&gt;&lt;/td&gt;
          &lt;td&gt;&lt;button type="button" class="printBtn"&gt;Print Form&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>With this applicable CSS:</p>
  
  <pre><code>table#headingTable
  {
      width: 100%;
  }
  
  td
  {
      vertical-align: middle;
  }
  
  h2
  {
      font-family: Tahoma, Geneva, sans-serif;
      text-align: center;
  }
  
  .printBtn
  {
      white-space: nowrap;
      font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
      font-size: 1em;
      border-width: 3px;
      border-color: #959595;
      cursor: pointer;
  }
  
  #dateHolder
  {
      float: left;
  }
  </code></pre>
  
  <p>The <code>&lt;td id="dateHolder"&gt;</code> cell <em>should</em> show the date and time in the middle, aligned with the next two table cells for that row, but you can see here that it does not:</p>
  
  <p><img src="https://i.stack.imgur.com/M7e3G.png" alt="enter image description here"></p>
  
  <p>I would like to think that this question is beneath me, but it is apparently not, because I was led to believe that as long as it was an inline element, or at least an element with <code>display: table-cell;</code>, but especially if it <em>IS</em> a table-cell (i.e., a <code>&lt;td&gt;</code> element), then vertical-align should be applied as specified in the CSS.</p>
  
  <p>I'm sure I could get something working, (using positioning, line-height adjustments, padding, etc.) but the fact that I can't seem to grasp <em>why</em> it doesn't work with the current rules I have set, just begs an answer for my education's sake.</p>
  
  <p><strong>Things I have tried</strong></p>
  
  <p>Using <code>&lt;span&gt;</code> inside the <code>&lt;td id="dateHolder"&gt;</code> element and targeting that with CSS, instead of just the text node.</p>
  
  <p>Setting a height (by <code>px</code>) to all of the <code>&lt;td&gt;</code> elements in the <code>&lt;tr&gt;</code> row.</p>
  
  <p>Adjusting the line-height of all of the <code>&lt;td&gt;</code> elements in the <code>&lt;tr&gt;</code> row.</p>
  
  <p><strong>Things You May Want To Know:</strong></p>
  
  <p>I have absolutely NO inline CSS. All of the CSS is in the same external document.</p>
  
  <p>In case you feel you need to view it, here is the entire CSS file (this site is still very new, so there's isn't much there yet):</p>
  
  <pre><code>body
  {
      width: 100%;
      margin: auto;
      background-color: #464646;
  }
  
  div#mainWrapper
  {
      background-color: #dfdfdf;
      width: 900px;
      border-style: ridge;
      border-width: 5px;
      border-color: #808080;
      margin: auto;
      padding: 10px 20px 0px;
      margin-top: 8px;
      text-align: center;
      padding-bottom: 20px;
  }
  
  table#headingTable
  {
      width: 100%;
  }
  
  td
  {
      vertical-align: middle;
  }
  
  h2
  {
      font-family: Tahoma, Geneva, sans-serif;
      text-align: center;
  }
  
  table#mainTable
  {
      width: 95%;
      margin: auto;
      margin-top: 40px;
      border-collapse: collapse;
      border: 2px solid #000;
  }
  
  td.leaveSection
  {
      width: 50%;
      margin: auto;
      white-space: nowrap;
  }
  
  .printBtn
  {
      white-space: nowrap;
      font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
      font-size: 1em;
      border-width: 3px;
      border-color: #959595;
      cursor: pointer;
  }
  
  #dateHolder
  {
      float: left;
  }
  
  div.bigLblWrapper
  {
      position: relative;
      left: -50px;
      display: inline-block;
      text-align: right;
      width: 80%;
  }
  
  label.bigLbl
  {
      font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
      font-size: 15px;
      font-weight: bold;
  }
  
  input.leaveTypeRadio
  {
      position: relative;
      left: -35px;
  }
  
  input[readonly]
  {
      background-color: #c6ebff;
  }
  </code></pre>
  
  <p>Lastly, I just want to stress that I am not as concerned with a solution as to how to do this (again, I'm sure I could make <em>something</em> work), as I am interested in an explanation as to what is disallowing me to establish the styling changes I want based on the rules that I have set.</p>