文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >内容中心不对齐

问内容中心不对齐
EN

Stack Overflow用户
提问于 2018-05-24 18:33:18
回答 3查看 356关注 0票数 1

这是我第一次在这里发帖。我在这封电子邮件上遇到了麻烦，我正在努力开发。一切看起来都很好，直到你展开全屏。当展开全屏时，一些内容最终会彼此相邻。请帮帮忙。谢谢。

​

代码语言：javascript
复制
.footer {
  width: 600px;
  background-color: #262626;
  text-align: center;
  font-family: verdana;
  text-decoration: none;
}

@media only screen and (max-width: 480px) {
  img {
    max-width: 100% !important;
  }
  .footer {
    max-width: 100% !important;
  }
}
代码语言：javascript
复制
<center>
  <table>
    <tr>
      <a href="https://www.dollarshaveclub.com/our-products/clean/conditioner"><img src="https://i.imgur.com/PDjptBG.jpg"></a>
    </tr>
    <tr>
      <img src="https://i.imgur.com/hQ742x0.jpg">
    </tr>
    <tr>
      <img src="https://i.imgur.com/Tp7E0YJ.jpg">
    </tr>
    <tr>
      <a href="https://www.dollarshaveclub.com/our-products/clean/conditioner"><img src="https://i.imgur.com/jGkDOCo.jpg"></a>
    </tr>
    <tr>
      <a href="https://www.dollarshaveclub.com/our-products/clean/shampoo-and-conditioner-bundle"><img src="https://i.imgur.com/ZO8mC30.jpg"></a>
    </tr>
    <div class="footer">
      <img style="padding-top:20px;" src="https://i.imgur.com/CShaFcV.png">
      <p style="font-size:13px; color:#9c9c9c;">2018 Dollar Shave Club. All Rights Reserved.</p>
      <p style="font-size:11px; color:#757575;">13335 Maxella Ave. Marina Del Rey, CA 90292</p>
      <a href="https://help.dollarshaveclub.com/hc/en-us/articles/115004873807-Privacy-Policy" style="font-size:11px; color: #545454;">Privacy</a>
      <a href="https://help.dollarshaveclub.com/hc/en-us/sections/115001914007-Membership-Settings" style="font-size:11px; color: #545454;">Unsubscribe</a>
      <br>
      <br>
    </div>
    </tr>
  </table>
</center>

​

html
css
email
html-email
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-05-24 18:42:59

浏览器没有呈现表(因为您没有<td>元素)。

更新使其完全响应，您可以使用100%的表宽度。您还需要margin:0 auto;标记上的img：

​

代码语言：javascript
复制
.footer {
  width: 600px;
  background-color: #262626;
  text-align: center;
  font-family: verdana;
  text-decoration: none;
}

img {
  margin: 0 auto;
}

@media only screen and (max-width: 600px) {
  img {
    max-width: 100% !important;
  }
  .footer {
    max-width: 100% !important;
  }
}
代码语言：javascript
复制
<center>
  <table width="100%" cellpadding="0" style="border-collapse: collapse;">
    <tr>
      <td>
        <a href="https://www.dollarshaveclub.com/our-products/clean/conditioner" target="_blank"><img src="https://i.imgur.com/PDjptBG.jpg" style="display:block;" /></a>
      </td>
    </tr>
    <tr>
      <td>
        <img src="https://i.imgur.com/hQ742x0.jpg" style="display:block;" />
      </td>
    </tr>
    <tr>
      <td>
        <img src="https://i.imgur.com/Tp7E0YJ.jpg" style="display:block;" />
      </td>
    </tr>
    <tr>
      <td>
        <a href="https://www.dollarshaveclub.com/our-products/clean/conditioner" target="_blank"><img src="https://i.imgur.com/jGkDOCo.jpg" style="display:block;" /></a>
      </td>
    </tr>
    <tr>
      <td>
        <a href="https://www.dollarshaveclub.com/our-products/clean/shampoo-and-conditioner-bundle" target="_blank"><img src="https://i.imgur.com/ZO8mC30.jpg" style="display:block;" /></a></td>
    </tr>
    <tr>
      <td class="footer">
        <img style="padding-top:20px; display:block;" src="https://i.imgur.com/CShaFcV.png" />
        <p style="font-size:13px; color:#9c9c9c;">2018 Dollar Shave Club. All Rights Reserved.</p>
        <p style="font-size:11px; color:#757575;">13335 Maxella Ave. Marina Del Rey, CA 90292</p>
        <a href="https://help.dollarshaveclub.com/hc/en-us/articles/115004873807-Privacy-Policy" target="_blank" style="font-size:11px; color: #545454;">Privacy</a>
        <a href="https://help.dollarshaveclub.com/hc/en-us/sections/115001914007-Membership-Settings" target="_blank" style="font-size:11px; color: #545454;">Unsubscribe</a>
        <br>
        <br>
      </td>
    </tr>
  </table>
</center>

​

票数 1
EN

Stack Overflow用户

发布于 2018-05-24 19:00:15

你的html代码有点糟糕。首先，您的表缺少<td>单元格。每排桌子都需要一个。您不能启动一行并使用<div>。它们不混在一起。

你的桌子需要一个width来防止它扩散。我添加了width="600"，因为这是一个很好的电子邮件宽度。

如果将display: block;添加到内联样式中，则图像将表现得更好。此外，您还可以添加一个结束斜杠/>。

使用下面的html，它修复了您所遇到的大部分问题。

祝好运。

代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Content not aligning in center</title>
  <style>
    .footer {
      width: 600px;
      background-color: #262626;
      text-align: center;
      font-family: verdana;
      text-decoration: none;
    }

    @media only screen and (max-width: 480px) {
      img {
        max-width: 100% !important;
     }
     .footer {
       max-width: 100% !important;
     }
   }
  </style>
</head>
<body>
<center>
<table width="600">
  <tr>
    <td>
      <a href="https://www.dollarshaveclub.com/our-products/clean/conditioner" target="_blank"><img src="https://i.imgur.com/PDjptBG.jpg" style="display:block;" /></a>
  </td>
</tr>
<tr>
  <td>
    <img src="https://i.imgur.com/hQ742x0.jpg" style="display:block;" />
  </td>
</tr>
<tr>
  <td>
    <img src="https://i.imgur.com/Tp7E0YJ.jpg" style="display:block;" />
   </td>
</tr>
<tr>
  <td>
    <a href="https://www.dollarshaveclub.com/our-products/clean/conditioner" target="_blank"><img src="https://i.imgur.com/jGkDOCo.jpg" style="display:block;" /></a>
  </td>
</tr>
<tr>
  <td>
    <a href="https://www.dollarshaveclub.com/our-products/clean/shampoo-and-conditioner-bundle target="_blank"><img src="https://i.imgur.com/ZO8mC30.jpg" style="display:block;" /></a></td>
</tr>
<tr>
<td class="footer">
  <img style="padding-top:20px; display:block;" src="https://i.imgur.com/CShaFcV.png" />
  <p style="font-size:13px; color:#9c9c9c;">2018 Dollar Shave Club. All Rights Reserved.</p>
  <p style="font-size:11px; color:#757575;">13335 Maxella Ave. Marina Del Rey, CA 90292</p>
  <a href="https://help.dollarshaveclub.com/hc/en-us/articles/115004873807-Privacy-Policy" target="_blank" style="font-size:11px; color: #545454;">Privacy</a>
  <a href="https://help.dollarshaveclub.com/hc/en-us/sections/115001914007-Membership-Settings" target="_blank" style="font-size:11px; color: #545454;">Unsubscribe</a>
  <br>
  <br>
  </td>
  </tr>
</table>
</center>
</body>
</html>
票数 1
EN

Stack Overflow用户

发布于 2018-05-24 18:48:10

就像@showdev说的。您的问题是没有<td>元素。

代码语言：javascript
复制
<!DOCTYPE html>

<head>
    <style type="text/css">
        .footer {
            width: 600px;
            background-color: #262626;
            text-align: center;
            font-family: verdana;
            text-decoration: none;
        }

        @media only screen and (max-width: 480px) {
            img {
                max-width: 100% !important;
            }
            .footer {
                max-width: 100% !important;
            }
        }
    </style>
</head>
<html>

<body>
    <center>
        <table>
            <tr>
                <td>

                    <a href="https://www.dollarshaveclub.com/our-products/clean/conditioner">
                        <img src="https://i.imgur.com/PDjptBG.jpg">
                    </a>
                </td>
            </tr>
            <tr>
                <td>

                    <img src="https://i.imgur.com/hQ742x0.jpg">
                </td>
            </tr>
            <tr>
                <td>

                    <img src="https://i.imgur.com/Tp7E0YJ.jpg">
                </td>
            </tr>
            <tr>
                <td>

                    <a href="https://www.dollarshaveclub.com/our-products/clean/conditioner">
                        <img src="https://i.imgur.com/jGkDOCo.jpg">
                    </a>
                </td>
            </tr>
            <tr>
                <td>
                    <a href="https://www.dollarshaveclub.com/our-products/clean/shampoo-and-conditioner-bundle">
                        <img src="https://i.imgur.com/ZO8mC30.jpg">
                    </a>
                </td>

            </tr>
            <tr>
                <td>

                    <div class="footer">
                        <img style="padding-top:20px;" src="https://i.imgur.com/CShaFcV.png">
                        <p style="font-size:13px; color:#9c9c9c;">2018 Dollar Shave Club. All Rights Reserved.</p>
                        <p style="font-size:11px; color:#757575;">13335 Maxella Ave. Marina Del Rey, CA 90292</p>
                        <a href="https://help.dollarshaveclub.com/hc/en-us/articles/115004873807-Privacy-Policy" style="font-size:11px; color: #545454;">Privacy</a>
                        <a href="https://help.dollarshaveclub.com/hc/en-us/sections/115001914007-Membership-Settings" style="font-size:11px; color: #545454;">Unsubscribe</a>
                        <br>
                        <br>
                    </div>

                </td>
            </tr>
        </table>
    </center>
</body>

</html>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/50515983

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档