Я пытаюсь выровнять баннер по центру по мере того, как вы его уменьшаете до меньшего разрешения, вместо того, чтобы сдвигать изображение вправо. Вот страница, о которой я говорю. Страница

Я использую 100% ширину.

        <!-- BEGIN TEMPLATE HEADING IMAGE - Full 100% Width // -->
            <tr class="heading">
                <td align="center" valign="top" id="preview" bgcolor="#FFFFFF" style="background-color:#FFFFFF; padding:0px; border-bottom:1px solid #eeeeee;">
                    <table cellpadding="0" cellspacing="0" border="0" height="400" width="100%">
                        <tr>
                            <td background="https://www.acuity-sports.com/newsletter/images/banner10.jpg" bgcolor="#ffffff" width="100%" height="400" valign="top">
                            <img editable width="600" src="" style="max-width:600; border:0px; display:block;" mc:edit="header_image" />
                                <!--[if gte mso 9]>
                                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:350px;">
                                <v:fill type="tile" src="images/main_image.jpg" color="#ffffff" />
                                <v:textbox inset="0,0,0,0">
                                <![endif]-->

                                <!--[if gte mso 9]>
                                </v:textbox>
                                </v:rect>
                                <![endif]-->
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <!-- END TEMPLATE HEADING IMAGE - Full 100% Width // -->
0
rundy 26 Фев 2015 в 19:14

2 ответа

Лучший ответ

Используйте свойства css: background-position для td с вашим баннером

background-position: center;

Для вашего элемента сделаем выравнивание по центру.

Также вы можете сделать это через атрибут style

style="background-position: center;"
2
Dmitry 26 Фев 2015 в 16:22

Попробуйте этот код

<!-- BEGIN TEMPLATE HEADING IMAGE - Full 100% Width // -->
        <tr class="heading">
            <td align="center" valign="top" id="preview" bgcolor="#FFFFFF" style="background-color:#FFFFFF; padding:0px; border-bottom:1px solid #eeeeee;">
                <table cellpadding="0" cellspacing="0" border="0" height="400" width="100%">
                    <tr>
                        <td bgcolor="#ffffff" width="100%" height="400" valign="top">
                        <img width="100%" src="https://www.acuity-sports.com/newsletter/images/banner10.jpg" style="max-width:600; border:0px; display:block;" mc:edit="header_image" />
                            <!--[if gte mso 9]>
                            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:350px;">
                            <v:fill type="tile" src="images/main_image.jpg" color="#ffffff" />
                            <v:textbox inset="0,0,0,0">
                            <![endif]-->

                            <!--[if gte mso 9]>
                            </v:textbox>
                            </v:rect>
                            <![endif]-->
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

Попробуйте эту онлайн-демонстрацию: http://jsfiddle.net/40jhoe0x/1/

Спасибо

0
Kalpesh Rajai 26 Фев 2015 в 16:22