Centering logo in e-mail wrapper makes other images break their containers.

[CheersnGears]

Pardon me, I am not a coder. I just want to center my site header in my e-mail wrapper.  I added

<div style="text-align: center;">
							<img src='{file="\IPS\Settings::i()->email_logo" extension="core_Theme"}' alt="{setting="board_name"}" width='{$imgDims[0]}' height='{$imgDims[1]}' />
                      </div> 

Open Div, Close Div

But when I do this, images in the e-mail body below break out of their container (emClient) or make the e-mail giant (outlook) or make the e-mail tiny with the header image big (iOS Mail). If I revert the template, everything below the logo renders properly, but the logo isn't centered.

The header image is 600px wide.

Any help would be appreciated.

[Nathan Explosion]

Instead of trying to wrap the image in a div, just add this:

text-align: center;

...to the style of the container the image is already in (a few lines above the <img.... line)

<td dir='{dir}' valign='middle' style="font-family: 'Helvetica Neue', helvetica, sans-serif; font-size: 30px; font-weight: 300; color: #262e33; line-height: 48px; padding-left: 10px;">

 

Edited April 26, 2023 by Nathan Explosion

[CheersnGears]

5 minutes ago, Nathan Explosion said:

Instead of trying to wrap the image in a div, just add this:

text-align: center;

...to the style of the container the image is already in (a few lines above the <img.... line)

<td dir='{dir}' valign='middle' style="font-family: 'Helvetica Neue', helvetica, sans-serif; font-size: 30px; font-weight: 300; color: #262e33; line-height: 48px; padding-left: 10px;">

 

Thanks, I'll give it a try.

[CheersnGears]

25 minutes ago, Nathan Explosion said:

Instead of trying to wrap the image in a div, just add this:

text-align: center;

...to the style of the container the image is already in (a few lines above the <img.... line)

<td dir='{dir}' valign='middle' style="font-family: 'Helvetica Neue', helvetica, sans-serif; font-size: 30px; font-weight: 300; color: #262e33; line-height: 48px; padding-left: 10px;">

 

This worked! Thanks for the help!