居中图像的响应式 CSS 行为答案

【问题标题】：Responsive CSS behaviour of a centered image居中图像的响应式 CSS 行为
【发布时间】：2015-10-22 20:43:00
【问题描述】：

当我将图像容器 (.colored-logo) 缩小到移动设备大小时，我无法让图像容器 (.colored-logo) 跨越浏览器的宽度。我创建了一个fiddle here，以便您查看行为。

抱歉，我已将我所有的 CSS 放在这里，以确保包含影响它的任何内容。

我正在处理一个电子邮件模板，我正在将徽标水平和垂直居中到一个带圆角的盒装区域中。

我的 HTML 是：

<div class="row invoice-top-header">
    <div class="column third colored-logo">
        <div class="logo">
            <span class="image-center"></span><img src="http://s24.postimg.org/ebd3rwub5/fresh_creations_logo.png"/>
        </div>
    </div>
    <div class="column third">...</div>
    <div class="column third">...</div>
</div>

row 类添加了一个 15px 内部填充，我在容器 (colored-logo) 中偏移了一个 -15px 左右边距。

我应用的 CSS 是这样的：

.colored-logo {
    background: #989898;  
    height: 128px;
    margin: 0px -15px 10px -15px;
    padding: 15px;
    width: 100%;
}
.logo {
    white-space: nowrap;
    text-align: center;
}
.image-center {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

为什么徽标容器（类为 colored-logo 的 div，深灰色背景）在移动模式下一次没有水平填充浏览器？ 30px 看起来太短，无法水平覆盖浏览器。谢谢！

【问题讨论】：

你指的标志容器是哪个元素？
嗨@Salketer，具有灰色背景颜色和圆角的容器。我希望它水平填充屏幕（colored-logo）。谢谢
" 正在处理电子邮件模板，我将徽标水平和垂直居中到带圆角的盒装区域中。" - 如果这是一个电子邮件模板，那么它不太可能适用于绝大多数电子邮件客户端。
感谢@Matthew，感谢您的信任投票。

标签： html css

【解决方案1】：

您的行类和列似乎都有填充。如果您希望更改仅在移动屏幕上生效，请尝试使用此 CSS：

@media screen and (max-width: 640px) {
   .colored-logo, .row {
      padding: 0;
      margin: 0;
   }
}

【讨论】：

【解决方案2】：

<div class="invoice-top-header">
    <div class="column third colored-logo">
        <div class="logo">
            <span class="image-center"><img src="http://s24.postimg.org/ebd3rwub5/fresh_creations_logo.png"/>
        </div>
    </div>
        <div class="row">
    <div class="column third">
        <div class="biller-details"> 
            <span><strong>BILLER NAME PTY LTD</strong></span>
            <span>ADDRESS LINE 1</span>
            <span>ADDRESS LINE 2</span>
            <span class="desktop">TEL: 02 3333 4444</span>
            <span class="mobile">TEL: <a href="tel:02 3333 4444">02 3333 4444</a></span>
            <span>ABN: 12345678</span>
            <span>ACN: 09876543</span>
            <span><a href="mailto:sample@email.com" data-rel="external">sample@email.com</a></span>
            <span>my-website.com.au</span>
        </div>
    </div>
    <div class="column third">
        <div class="customer-details"> 
            <span><strong>CUSTOMER NAME PTY LTD</strong></span>
            <span>ADDRESS LINE 1</span>
            <span>ADDRESS LINE 2</span>
            <span class="desktop">TEL: 02 5555 7777</span>
            <span class="mobile">TEL: <a href="tel:02 5555 7777">02 5555 7777</a></span>
            <span>ABN: 12345678</span>
            <span>ACN: 09876543</span>
            <span><a href="mailto:sample@email.com" data-rel="external">sample@email.com</a></span>
            <span>customer-website.com.au</span>
        </div>
    </div>
        </div>
</div>

将您的 HTML 更改为上述 HTML
从 .colored-logo 中删除边距 css 属性
如果您正在编写时事通讯，您应该真正考虑使用表格并避免使用 css3 属性，因为许多电子邮件客户端仍然不支持t support lot of things. Here you can find a list with email clint which does and doesnt 媒体查询：

https://litmus.com/help/email-clients/media-query-support/

刚刚测试过，效果很好

【讨论】：

【解决方案3】：

禁用这些值/属性似乎有效

.row {
    margin: 0 auto;
    /* padding: 15px; */
    max-width: 1040px;
    width: 100%;
}

.colored-logo {
    background: #989898;  
    height: 128px;
    /* margin: 0px -15px 10px -15px; */
    padding: 15px;
    width: 100%;
}

只需在您的媒体查询中根据需要进行调整。

JSfiddle Demo

【讨论】：