title: How to Display text in Middle of table cell Horizontally and vertically in html css?
body: <p>Any way to middle value in my table cell, both horizontally and vertically.</p>
  
  <p>Here is code:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr style="display: block;height: 44px !important;color:#fff;"&gt;
          &lt;td style="display:table-cell;vertical-align:middle;"&gt;&lt;span class="" &gt;&lt;img src="../images/cal/green-25.png" alt="green-food" width="32px" height="32px"/&gt; &lt;label style="" class="ylw "&gt;Yellow&lt;/label&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;td style="text-align:right;"&gt;200 Cal&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr style="display: block;height: 44px !important;color:#fff;"&gt;
          &lt;td style=""&gt;&lt;span class="" &gt;&lt;img src="../images/cal/green-25.png" alt="green-food" width="32px" height="32px"/&gt; &lt;label style="" class="ylw "&gt;Yellow&lt;/label&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;td style="text-align:right;display:table-cell;vertical-align:middle;"&gt;200 Cal&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>