【问题标题】:Centering an image for responsive website为响应式网站居中图像
【发布时间】:2014-02-01 15:05:26
【问题描述】:

所以我正在为学校作业制作响应式设计,并且我正在尝试将图像宽度居中。

我在 Photoshop 中缩放了图像,所以我不必为图像设置任何宽度或高度

这是我现在得到的,但这不起作用

<header> <img src="afb%20/logo3.png" alt="logo3" width="" height="" /> </header>

header{ width: 100%; margin-left: auto; margin-right: auto; }

有人可以帮帮我吗?真的需要这个!

提前致谢

【问题讨论】:

    标签: image html css centering


    【解决方案1】:

    只需在标题 CSS 中设置 text-align: center

    您目前正在将页眉设为 100% 宽度,因此您的边距将不适用。此外,由于您的容器是 100% 宽并且没有文本对齐,因此 img 将始终在左侧对齐。

    这里:

    header { width: 100%; text-align: center; }​
    

    http://jsfiddle.net/xMPZ4/

    【讨论】:

      【解决方案2】:
      .center{margin: 0px auto; display: block;}
      
      <header><img src="updates_button.jpg" alt="logo3" class="center"></header>
      

      【讨论】:

        【解决方案3】:

        你可以为图片添加一个 logo 类并将 CSS 设置为:margin:0px auto; width:200px; 当然替换图片宽度...

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2014-07-22
          • 1970-01-01
          • 2015-04-01
          相关资源
          最近更新 更多