无法在响应式布局中将横幅居中

Question

我正在尝试让横幅居中，因为它会缩小到较小的分辨率，而不是将图像推到右边。这是我指的页面。 Page

我使用的是 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 // -->

Answer 1

试试这个代码

<!-- 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/

谢谢

Answer 2

使用 css 属性：background-position 用于 td 与您的横幅

background-position: center;

您的元素将使居中对齐。

您也可以通过 style 属性

style="background-position: center;"

无法在响应式布局中将横幅居中

Unable to Center Banner in Responsive Layout

html

css

responsive-design