Center image in table?
<p>I have tried using vertical-align in CSS code, I have tried using align in inline CSS. But I just can't get the image to center properly. If only there were a horizontal-align property.</p>

<p>Here is the code as of right now. There isn't much in the code for either the HTML or the CSS:</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>body {
  background-color: violet
}
table.dog {
  background-color: SteelBlue;
}
table.cat {
  background-color: #FF91A4;
}
table.puppy {
  background-color: #CBA135;
}
table.kitten {
  background-color: #FF8243;
}
table.rodent {
  background-color: #6C2E1F;
}
table.lizard {
  background-color: #F8DE7E;
}
table.snake {
  background-color: #D70000;
}
table.turtle {
  background-color: #355E3B;
}
table.alligator {
  background-color: #171717;
}
table.crocodile {
  background-color: #556B2F;
}
table.bird {
  background-color: skyblue;
}
table.dog.female.goldenretriever {
  background-color: #0077BE;
}
table.dog.male.greatdane {
  background-color: #1C39BB;
}
table.dog.female.poodle {
  background-color: #007BBB;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;

&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;link rel="stylesheet" type="text/css" href="Style.css"&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;h1&gt;Dogs&lt;/h1&gt;
  &lt;h2&gt;Sophie&lt;/h2&gt;
  &lt;p&gt;&lt;/p&gt;
  &lt;table class="dog female goldenretriever" border="5" align="right"&gt;
    &lt;thead&gt;
      &lt;th colspan="2"&gt;Sophie&lt;/th&gt;
      &lt;tbody&gt;
        &lt;tr colspan="2"&gt;
          &lt;td class="dog.head"&gt;
            &lt;img src="https://tse1.mm.bing.net/th?&amp;id=OIP.M241ab28f81f46d4c117cb21c6bd6d60co0&amp;w=242&amp;h=211&amp;c=0&amp;pid=1.9&amp;rs=0&amp;p=0&amp;r=0"&gt;
          &lt;/td&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;
          Breed
        &lt;/td&gt;
        &lt;td&gt;
          Golden Retriever
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;
          Gender
        &lt;/td&gt;
        &lt;td&gt;
          Female
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;
          No. of Puppies
        &lt;/td&gt;
        &lt;td&gt;
          8
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Times pregnant&lt;/td&gt;
        &lt;td&gt;
          1
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;
          Health
        &lt;/td&gt;
        &lt;td&gt;
          Healthy
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;
          Age
        &lt;/td&gt;
        &lt;td&gt;
          2 years
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
&lt;/body&gt;</code></pre>
</div>
</div>
</p>

<p>It is already vertically centered since the cell is the size of the image. But how do I get it horizontally centered so that it looks nicer? The colspan property doesn't seem to affect this image row at all.</p>