Photoshop Question posted in
The official user guide can be found here.

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

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

Tags:

3

Answers


  1. 0

    here you are

    .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>
    Login or Signup to reply.
  2. 0

    It is very simple. Just do this :-

    <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>
    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search