Question

您好我的桌面布局有问题。我试图在蓝色文本下对齐“LEARN MORE”图像，遗憾的是它打破了下一个元素。

见图像：http://www.fileswap.com/dl/UDgc1YtJf1/

<table width="600" height="108" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#3baaff" style="border-left: 1px solid #dadada; border-right: 1px solid #dadada;">
            <tr>
                <td>
                    <p style="color: #fff; padding: 5px 32px 40px 32px; font-family: arial; font-size: 13px; text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>     
               </td>
            </tr>   

         <tr valign="center">
                 <td style="background-color: #fff;"> <a href="#"> <img class="deviceWidth" src="img/learn-more.png" align="center" alt="" border="0" style=" position: relative; top: -45px; left: -1px; margin 0 auto;" /></a> </td>  
          </tr>

而且下面的按钮也没有对齐中心，而是与左侧对齐

见图像：http://www.fileswap.com/dl/pJ5t2ATKx/

<tr>
                            <td align="center" style="padding: 10px;">
                                <h3 style="font-family: arial; font-size: 15px; color: #7c7b7b;">Product No. 1 </h3>
                                <a href="#"><img width="262" src="img/image1.jpg" alt="" border="0" style="width: 267px" class="deviceWidth" /></a></p>
                                <p style="text-align: center; font-family: arial; color: #7c7b7b; font-size: 12px;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                            </td>
                        </tr>

检查我的演示所以你可以看到：http://jsfiddle.net/YTvqb/4/

Answer 1

您必须在。

中添加“text-align：center”

请参阅Demo

                <td style="text-align: center;"> 
                    <h2 style="color: #3baaff; text-align: center; font-family: 'Pacifico'; margin-top: 30px;"> Check our site for coupons </h2>
                    <p style="color: #7c7b7b; text-align: center; font-size: 12px; text-align: center; font-family: arial; padding: 0 32px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.   </p>
                    <a href="#" class="btn" align="center"> LEARN MORE</a>
                </td>

Answer 2

好的，所以你在你的设计中广泛使用了tables，所以我的建议是避免桌面元素的样式，因为它可能会影响你的整个布局.....

对于了解更多链接，请将其添加为内联

<a href="#" class="btn" align="center" style="display:block;width:18%;margin:0 auto;height:16px;"> LEARN MORE</a> <br >

宽度可以按％年龄调整，因为您正在考虑网站的某种程度的响应效果！
给予display会更改默认内联，因此您可以为其指定宽度，margin会将您的标记拉到中心，这是推送页面中心任何标记的基础！：）

边框未对齐 - 图像未正确设置（表格）

2 个答案: