Image not aligning to center - email

Struggling to center align an image at the top of an email due to code that hides it when the browser is larger than 520px. Is there a way to exempt this specific image and keep it centered?

.mobile {
    display: none !important;
    font-size 0 !important;
    max-height: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
    mso-hide: all !important;
    overflow: hidden !important;
}
.mobile img {
    max-height: 0 !important;
    width: 0 !important;
}

@media only screen and (max-width: 520px) {
    *[class=hide] {
        display: none !important;
    }
    [class=mobile] {
        display: block !important;
        max-height: none !important;
        margin: 0px !important;
        overflow: visible !important;
    }
    *[class=mobile] img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        max-width: 100% !important;
    }
}

.

<td class="mobile" style="font-size: 0; mso-hide: all; width:120px; height:24px;"><div align="center"><a href="~PROBE(201)~"><img border="0" height="24" width="120" src="images/MH-logo.png" /></a></div></td>
htmlcssemail

Answer №1

It's important to note that the "align" attribute is deprecated in HTML5 and may not be fully supported by all browsers or email clients.

To center text within your div, consider using the following code:

<div style="text-align:center">

UPDATE:

Upon further examination, it appears that the issue may stem from incomplete HTML within the TD tag.

<table style="width:100%"><tr>
<td class="mobile" style="font-size: 0; mso-hide: all; width:120px; height:24px;"><div align="center"><a href="~PROBE(201)~"><img border="0" height="24" width="120" src="images/MH-logo.png" /></a></div></td>
</tr></table>

FYI

I have removed unnecessary code segments for clarity.

<style>
.mobile {
    font-size: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.mobile img {
}

@media only screen and (max-width: 520px) {
    *[class=hide] {
        display: none !important;
    }
    [class=mobile] {
        margin: 0px !important;
        overflow: visible !important;
    }
 *[class=mobile] img {
       display: block !important;
        max-width: 100% !important;
    }
}
</style>

<table style="width:100%"><tr>
<td class="mobile" style="font-size: 0; XXXXmso-hide: all; width:120px; height:24px;"><div align="center"><a href="~PROBE(201)~"><img border="0" height="24" width="120" src="images/MH-logo.png" /></a></div></td>
</tr>
</table>

Answer №2

To fix the problem, specify a specific width and apply the following CSS:

margin-left: auto;
margin-right: auto;

This solution should resolve your issue.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Changes in browser size will not affect the height

Is there a way to smoothly change the height of the navigation bar when resizing the browser? Currently, it snaps to the new height when the width goes below or above 1000px. Any suggestions? nav.cust-navbar { -webkit-transition: height 2s; tran ...

htmlcssmedia-queries

Angular and JS do not have the functionality to toggle the split button

I have a question that seems similar to others I've seen, but I haven't found a solution yet. Can someone please review my code? In the component, I have {{$ctrl.init}} and {{$ctrl.people}} assigned. I am sure this assignment is correct because ...

javascripthtmlangularjs

Steps for developing a web-based interface for my software

I could use some guidance on how and where to get started. Currently, I have a program written in vb.net that performs basic functions by executing bat files, accessing specific folders, and carrying out command line tasks. My plan is to convert this progr ...

javaphphtmlvb.net

Showing a PHP echo statement in an HTML div with the help of jQuery

I am looking for a way to showcase the echo text generated by PHP on a separate HTML page. I attempted to use jQuery for this purpose, but it proved unsuccessful. Please do not dismiss this question as I have gone through all the previous posts related to ...

phpjqueryhtmlajaxcordova

Flashing on objects, Chrome-exclusive, utilizing background-blend-mode exclusively

Our website, www.desirio.com, utilizes a background-image on the body with the following CSS property: background-blend-mode: luminosity An issue we have noticed in Chrome is that when hovering over elements, strange white lines randomly flash on the scr ...

cssgoogle-chromebackground-blend-mode

Tips for delivering a variable to a React Native Stylesheet

Is there a way to pass a variable to the "shadowColor" property in my stylesheet from an array declared in the code above? I keep encountering a "Can't find name" error. Attempting to use a template literal has not resolved the issue. Any assistance w ...

javascriptcssreactjstypescriptreact-native

Tips for disabling default browser input validation in React

https://i.stack.imgur.com/834LB.png Is there a way to remove the message "Please fill out this field" while still keeping the "required" attribute intact? I have my own validation system in place, so I need to use the "required" attribute to determine whe ...

javascripthtmlcssattributes

What is the best way to recreate this base with shadow, highlight effects, and a color that's not flat?

Click here to view the image I have successfully recreated part of it: a bottom with rounded corners, solid border, and solid colored background. However, I am struggling with achieving certain effects such as the highlighted top portion - where the backg ...

csshtml

The CSS code ".btn btn-primary * { visibility: hidden; } is failing to work as intended

Trying to hide specific buttons for print using CSS, but it doesn't seem to be working. Here is the code snippet: .btn btn-primary * { visibility: hidden; } <div id="control" style="display: none"> <button class="bt ...

htmlcss

Javascript Callback function not working as expected

I'm attempting to include an anonymous callback function in my code. I know it might seem a bit messy. By typing into the intro section, it triggers the animation using the .typed method with specific parameters. What I'm struggling to do is imp ...

javascripthtmlanimation

Hovering triggers the appearance of Particle JS

I am attempting to add particle js as the background for my website. I have tried implementing this code snippet: https://codepen.io/nikspatel/pen/aJGqpv My CSS includes: position: fixed; z-index: -10; in order to keep the particles fixed on the screen e ...

javascripthtmlcss

Is there a way to position text at the bottom of a card?

Looking to showcase multiple articles on a single page? I utilized Bootstrap 5 cards to create a visually appealing layout. While everything turned out as I hoped, the only issue I'm facing is that the "read more" link is not positioned at the bottom ...

htmlcsstwitter-bootstrapbootstrap-5card

The background color appears to be fixed in place even after attempting to switch it to

I've been using a plugin for my camera functionality and I need to set the background color to transparent in order to display it properly. However, when I close the camera preview, the background remains transparent which is causing an issue. Is the ...

htmlcsscordovaionic-frameworkionic2

Align elements on the left side with some space between them

Having trouble displaying a list of images inline within a div. When I float them left, they leave a lot of space and do not display properly. Can anyone help me with this issue? See screenshot below: Here is my html code: <div class="col75"> & ...

javascriptjqueryhtmlcss

How to use Selenium in Python to target specific sub-elements

I am currently working with the following HTML code block: <tbody id="id_tbody"> <tr id="tr_project_0" class="project_tr clr01 hover" data-select-value="0" style="border-top: 1px dotted #B4B4B4;"> <td class="txtC"> <a href="/173537" ...

pythonhtmlseleniumxpath

Optimizing Three.js for better performance

Recently, I delved into working with three.js and webgl for a personal project. My goal was to develop a wardrobe model based on user input. You can check out the project at this link: Initially, the rendering speed was fast and smooth without Materials a ...

javascripthtmlthree.jsrenderingwebgl

How can I center a Bootstrap modal vertically and make it responsive?

Is there a way to vertically center the bootstrap modal? I have been searching for a solution, but none seem to be responsive or effective. My website is using Bootstrap 3. The modal does not adjust properly on smaller screens or when the browser window i ...

javascriptjqueryhtmlcsstwitter-bootstrap

Struggling to grasp the concept of Vue3 style binding

While browsing the Vue website, I came across a particular example that left me puzzled. Inside the <script> section, there is this code: const color = ref('green') function toggleColor() { color.value = color.value === 'green' ...

htmlcssvue.jsvuejs3

The IDs and classes of HTML elements

I have two different implementations of a livechat script. On my sandbox site, the livechat is fixed to the bottom right of the page and scrolls with the window. However, on my live site (where this specific code comes from), it is attached to the footer. ...

javascripthtmlcss

Enhancing the appearance of child elements using CSS modules in Next.js

My Countdown component implementation includes: import styles from "./Countdown.module.scss"; import React from "react"; import useTimer from "hooks/useTimer"; import cn from "classnames"; function Countdown({ date, ...

cssreactjsnext.jscss-modules