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

使用带有横幅的background-position的css属性：td

background-position: center;

元素的

将使中心对齐。

您也可以通过style属性

来完成此操作

style="background-position: center;"

Answer 2

试试这段代码

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

谢谢

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

2 个答案: