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

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

使用 css 属性:background-position for td with your banner

background-position: center;

您的元素将使居中对齐。

你也可以通过 style 属性来实现

style="background-position: center;"