dspjoe dspjoe - 1 month ago 6
HTML Question

Trying to left align img with text but don't want it to go all the way over

Here's the code I'm working with. I have it all in one

<th>
tag for aesthetic reasons; I tried making the img it's own
<th>
and then making everything else
<th colspan=3>
, but if I do that not everything is centered together nicely. If I just don't align the img, it centers above h1, but that makes the height of the th too large for the page I'm working on.

Any help is appreciated!



<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>





If I run what I have here, this is what I get:
enter image description here
Hopefully you can see what I mean now-- I want the image to be directly to the left of the text so that it all centers together nicely above those four columns.
Here's what I want it to look like (I just used Photoshop to move it - this is what I'm trying to figure out how to code):
enter image description here

Answer

Try not to use table to align content on a page. I aligned it using 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>

Comments