试图将img与文本对齐，但不希望它一直过去

Question

这是我正在使用的代码。出于美学原因，我将它全部放在一个<th>标签中;我尝试制作img它自己的<th>，然后制作其他所有内容<th colspan=3>，但如果我这样做，并不是所有内容都很好地集中在一起。如果我只是不对齐img，它会居中于h1之上，但这会使得我正在处理的页面的高度过大。

感谢任何帮助！

<tr>
  <th colspan=4>
    <img src="image1.png" align="left" />
    <h1>Cumulative Lifetime Giving</h1>
    <h2>Giving Levels</h2>
    <small><em>* Denotes deceased</em></small>
  </th>
</tr>

如果我在这里运行我所拥有的，这就是我得到的： 希望你能看到我现在的意思 - 我希望图像直接位于文本的左侧，这样它们就可以很好地集中在这四列之上。 这就是我想要它的样子（我只是使用Photoshop来移动它 - 这就是我想要弄清楚如何编码）：

Answer 1

尽量不要使用表格来对齐页面上的内容。 我使用divs对齐它：

<div style="text-align:center;">
  <div style="display:inline-block;">
    <img src="https://www.deltasigmapi.org/images/default-source/foundation-images/foundation-seal360cf5b665726cb08b9eff0000713b9c.png" width="100px" height="100px" />
  </div>
  <div style="display:inline-block;"><h1>Cumulative Lifetime Giving</h1>
    <h2>Giving Levels</h2>
    <small><em>* Denotes deceased</em></small></div>
</div>

Answer 2

你在这里

.th {
  text-align: center;
}
.center-wrapper {
  display: inline-block;
}
.center-text {
  display: block;
  overflow: hidden;
  padding-left: 20px;
}
.img {
  float: left;
  border-radius: 150px;
}

<table width="100%">
<tr>
  <th class="th">
    <span class="center-wrapper">
      <img class="img" src="https://unsplash.it/100/100"/>
      <span class="center-text">
        <h1>Cumulative Lifetime Giving</h1>
        <h2>Giving Levels</h2>
        <small><em>* Denotes deceased</em></small>
      <span>
    </span>
  </th>
</tr>
</table>

Answer 3

很简单。只需这样做： -

＆＃13;

＆＃13;

<table align="center">
       <tr>
          <th colspan=4>
          <img src="http://2.media.dorkly.cvcdn.com/10/57/e10409b03f73dfae594e0207caa4b681.jpg" width="170" height="170" align="left" style="padding-right: 20px"/>
                    <h1>Cumulative Lifetime Giving</h1>
                    <h2>Giving Levels</h2>
                    <small align="center"><em>* Denotes deceased</em></small>
                    </th>
       </tr>
       </table>

＆＃13;

＆＃13;

＆＃13;