在向其添加img时更改大小

Question

我在一个看起来像应用程序图标的页面上制作按钮，我已经将div放在一个表中来组织它们，在div中我想要放置一个像小图标的图像然后在下面的文本但是当我添加图像时div用它所在的表改变了大小和混乱。

该表位于div中，称为容器，设置为屏幕宽度和高度的100％

This is what i want it to look like but with an image above the text

This is what happens when i add the image

    /* The table for the navigation buttons */
    table#buttonTable {
      position: relative;
      margin: 7.5% auto 0 auto;
      width: 90%;
      height: 68%;
      padding: 0;
      background-color: #444;
      border-radius: 25px;
    }
    /* The navigation buttons */
    div.navigationButtons {
      position: relative;
      background-color: #282828;
      width: 55%;
      height: 55%;
      margin: 0;
      padding: 0;
      border-radius: 25px;
      box-shadow: 0 0 20px #1C1C1C inset;
      -webkit-box-shadow: 0 0 20px #1C1C1C inset;
      -moz-box-shadow: 0 0 20px #1C1C1C inset;
      -ms-box-shadow: 0 0 20px #1C1C1C inset;
    }
    img#calcImg {
      position: relative;
      width: 20%;
      height: auto;
      vertical-align: top;
    }
    /* Text in the navigation buttons */
    p.navButtonsText {
      position: relative;
      color: #008080;
      margin: 0;
      padding: 0;
      top: 75%;
      font-size: 200%;

    }

<table id="buttonTable">
  <tr>
    <td align="center">
      <div onclick="window.location = 'calculators.html';" id="calculatorsButton" class="navigationButtons">
        <img src="images/tealCalculator.png" id="calcImg" />
        <p class="navButtonsText">Calculators</p>
      </div>
    </td>
    <td align="center">
      <div onclick="window.location = 'setupTips.html';" id="setupTipsButton" class="navigationButtons">
        <p class="navButtonsText">Setup Tips</p>
      </div>
    </td>
  </tr>
</table>

Answer 1

    /* The table for the navigation buttons */
    table#buttonTable {
      position: relative;
      margin: 7.5% auto 0 auto;
      width: 90%;
      height: 68%;
      padding: 0;
      background-color: #444;
      border-radius: 25px;
    }
    /* The navigation buttons */
    div.navigationButtons {
      position: relative;
      background-color: #282828;
      width: 45%;
      height: auto;
      margin: 0;
      padding: 0;
      border-radius: 25px;
      box-shadow: 0 0 20px #1C1C1C inset;
      -webkit-box-shadow: 0 0 20px #1C1C1C inset;
      -moz-box-shadow: 0 0 20px #1C1C1C inset;
      -ms-box-shadow: 0 0 20px #1C1C1C inset;
    }
    img#calcImg {
      position: relative;
      width: 65%;
      height: auto;
      vertical-align: middle;
    }
    /* Text in the navigation buttons */
    p.navButtonsText {
      position: relative;
      color: #008080;
      margin: 0;
      padding: 0;
      font-size: 120%;

    }
    
    table tr td {
      width: 200px;
      height: 230px;
    }

<table id="buttonTable">
  <tr>
    <td align="center">
      <div onclick="window.location = 'calculators.html';" id="calculatorsButton" class="navigationButtons">
        <img src="http://icons.iconarchive.com/icons/igh0zt/ios7-style-metro-ui/256/MetroUI-Apps-Mac-App-Store-icon.png" id="calcImg" />
        <p class="navButtonsText">Calculators</p>
      </div>
    </td>
    <td align="center">
      <div onclick="window.location = 'setupTips.html';" id="setupTipsButton" class="navigationButtons">
        <img src="http://icons.iconarchive.com/icons/igh0zt/ios7-style-metro-ui/256/MetroUI-Apps-Mac-App-Store-icon.png" id="calcImg" />
        <p class="navButtonsText">Setup Tips</p>
      </div>
    </td>
  </tr>
</table>