2 Stimmen

Jpg ist nicht zentriert in meinem HTML-Code

Hallo, ich versuche herauszufinden, wie ich dieses Bild basierend auf meinem Code zentrieren kann: Habe es gerade mit dem center-Tag bearbeitet, aber immer noch das Gleiche:

    *|MC:SUBJECT|* 

        /* HINWEIS: CSS sollte eingebettet sein, um zu verhindern, dass es in bestimmten E-Mail-Clients wie GMail entfernt wird. 
        MailChimp bindet CSS automatisch ein, oder Sie können dieses Tool verwenden: http://www.mailchimp.com/labs/inlinecss.php. */

            /**
             * @tab Seite
             * @section Hintergrundfarbe
             * @tip Wählen Sie eine Farbe für den Hintergrund Ihrer HTML-E-Mail. Sie könnten eine wählen, die zu Ihrem Firmenlogo passt.
             * @theme Seite
             */
            body {
                /*@editable*/ background-color: #cccccc;
                text-align:center;
            }

            /**
             * @tab Seite
             * @section Rahmen
             * @tip Fügen Sie einen Rahmen hinzu, um den Inhalt Ihrer Vorlage vom Hintergrund der E-Mail abzuheben.
             */
            #layout {
                /*@editable*/ border: 5px solid #999999;
                /*@editable*/ background:#ffffff;
                margin: 10px auto;
                text-align:left;
            }

            /**
             * @tab Kopfzeile
             * @section Kopfleiste
             * @tip Wählen Sie eine Reihe von Farben, die gut zu den Farben Ihres Logo-Bildes oder Textkopfes aussehen.
             */
            #header {
                /*@editable*/ background-color: #cccccc;
                /*@editable*/ padding: 0px;
                /*@editable*/ color: #333333;
                /*@editable*/ font-size: 30px;
                /*@editable*/ /*font-family: Georgia;*/
                                    /*@editable*/ /*font-family: Calibri;*/
                /*@editable*/ /*text-align: left;*/

            }

            /**
             * @tab Body
             * @section Standardtext
             * @tip Dies ist der Standardtextstil für den Text Ihrer E-Mail.
             * @theme Inhalt
             */
            #content {
                /*@editable*/ /*font-size: 13px;*/
                                    /*@editable*/ font-size: 18px;
                /*@editable*/ color: #333333;
                /*@editable*/ /*font-family: Helvetica;*/
                                    /*@editable*/ font-family: Calibri;
                /*@editable*/ line-height: 1.25em;
                /*@editable*/ padding: 10px 30px;
            }

            /**
             * @tab Body
             * @section Titelstil
             * @tip Titel und Überschriften in Ihrem Nachrichtentext. Machen Sie sie groß und gut lesbar.
             * @theme Titel
             */
            .primary-heading {
                /*@editable*/ /*font-size: 28px;*/
                                     /*@editable*/ font-size: 26px;                                      
                /*@editable*/ font-weight: bold;
                /*@editable*/ color: #8b0000;
                /*@editable*/ /*font-family: Georgia;*/
                                    /*@editable*/ font-family: Calibri;
                /*@editable*/ /*line-height: 150%;*/
                                     /*@editable*/ line-height: 100%;
                /*@editable*/ margin: 25px 0 0 0;
                                    /*@editable JUST ADDED*/ text-align: center;

            }

            /**
             * @tab Body
             * @section Untertitelsstil
             * @tip Dies ist der Text der Bildunterschrift, der unmittelbar unter Ihren Titeln/Überschriften erscheint.
             * @theme Untertitel
             */
            .secondary-heading {
                /*@editable*/ /*font-size: 20px;*/
                /*@editable*/ /*font-weight: bold;*/
                /*@editable*/ color: #000000;
                /*@editable*/ font-style: normal;
                /*@editable*/ /*font-family: Georgia;*/
                /*@editable*/ margin: 25px 0 5px 0;
            }

            /**
             * @tab Footer
             * @section Fußzeile
             * @tip Sie könnten Ihrer Fußzeile eine helle Hintergrundfarbe geben und sie mit einer oberen Grenze trennen
             * @theme Fußzeile
             */
            #footer {
                /*@editable*/ background-color: #eeeeee;
                /*@editable*/ border-top: 0px none #ffffff;
                /*@editable*/ padding: 20px;
                /*@editable*/ font-size: 10px;
                /*@editable*/ color: #333333;
                /*@editable*/ line-height: 100%;
                /*@editable*/ font-family: Verdana;
            }

            /**
             * @tab Footer
             * @section Link-Stil
             * @tip Geben Sie Ihren Fußzeilen-Links eine Farbe an.
             * @theme Link_Fußzeile
             */
            #footer a {
                /*@editable*/ color: #800000;
                /*@editable*/ text-decoration: underline;
                /*@editable*/ font-weight: normal;
            }

            /**
             * @tab Seite
             * @section Link-Stil
             * @tip Geben Sie allen Hyperlinks in Ihrer E-Mail eine Farbe an.
             * @theme Link
             */
            a, a:link, a:visited {
                /*@editable*/ color: #800000;
                /*@editable*/ text-decoration: underline;
                /*@editable*/ font-weight: normal;
            }

                E-Mail im Browser anzeigen | 
                Abbestellen *|EMAIL|* | Weiterleiten an einen Freund 

                *|LIST:DESCRIPTION|* 
                *|HTML:LIST_ADDRESS_HTML|*

3voto

Horia Dragomir Punkte 2830

Ich sehe, dass dies eine Mailchimp Vorlage ist.

Verwenden Sie eine Tabelle, um das Bild zu umrahmen und setzen Sie die Eigenschaft align der umschließenden td auf center.

Mail-Templates sind schrecklich. Ich weiß.

UPDATE:

1voto

Sean Punkte 7839

Überprüfen Sie alle Abstände und alles, sie könnten das Bild vom Zentrum abweichen lassen.

-1voto

user2097953 Punkte 89

HTML ausrichten ist veraltet. Verwenden Sie stattdessen eine gestaltete DIV innerhalb des TD-Tags, z.B.

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X