【问题标题】:Center an image in a div too small for it?将图像居中放在一个太小的 div 中?
【发布时间】:2010-11-23 13:41:10
【问题描述】:

所以我的正文中有一个百分比宽度的 div,其中有一个具有如下内联样式的 div:

text-align: center; margin-left: -15px; margin-right: -15px; overflow: hidden;

如您所见,我打开了text-align: center;,如果图像足够小以容纳div,则将图像居中。但百分比宽度div 在我的 1280x800 屏幕上肯定不够大。

负边距是为了克服其父级div 上的一些填充。 overflow:hidden 让事情看起来像我想要的那样,而不是凌乱。所以,它就像我想要的那样工作,就像onenaught.com 的标题图像一样。当您将浏览器变宽时,它会在右侧变得更加明显,但不会从两侧展开,因为它没有居中。

所以,我想知道是否有任何方法可以使图像居中。知道吗?

编辑:页面here

【问题讨论】:

    标签: css image html center


    【解决方案1】:

    一种选择是使用left: 50% 绝对定位图像,然后在图像上使用负边距,等于图像宽度的一半。当然,这需要包含 div 将其定位设置为相对或绝对,以便为要在其中绝对定位的图像提供正确的容器类型。

    另一个选项(可能更好)是不使用图像标签,只需将图像设置为父 div 的背景,并使用background positioning CSS attributes 将其居中。这不仅确保它居中而不强制绝对定位,而且它还自动裁剪溢出,因此溢出属性不是必需的。

    【讨论】:

    • 标记答案,因为它主要涵盖提交的两个答案。无法使用背景方法使事情正常工作,并且您还没有真正做到绝对定位。不过,谢谢。
    • +1 因为第一个解决方案也适用于非图像。这个问题确实指定了图像,但我来这里是为了将div 放在一个太小的容器中。谢谢。
    • 链接似乎坏了在这里找到它w3schools.com/cssref/pr_background-position.asp 现在,解决方案是“背景位置:中心;”谢谢
    【解决方案2】:

    考虑使用图像作为背景;)

    使用 background-position 得到你想要的。

    您可能需要一个 javascript 解决方案来实现一致的跨浏览器结果

    【讨论】:

    • 如果图像纯粹是装饰性的,我会鼓励这种解决方案。 background-position: 50% 50% 在任何地方都可以正常工作。
    【解决方案3】:

    您实际上可以通过将图像上的margin-leftmargin-right 设置为-100% 来做到这一点。

    这里有一个 jsFiddle 演示了这一点。(使用下面的那个更好)

    将图像上的margin-leftmargin-right 设置为更大的负数是一个更好的主意,例如-9999%,与 -100% 值一样,只要 div 的包含元素的宽度小于 div 宽度的 3 倍,图像就会开始偏离中心:

    margin-left: -100% + the div's width: 100% + margin-right: -100% = 3x div width

    您可以检查此 jsFiddle 与前一个之间的行为差​​异,方法是将溢出切换为可见并将结果窗口的大小调整为小于 300% 的宽度 @987654334 @。

    在支持的浏览器范围内引用@MaxOriola(来自 cmets):

    我已经在 Firefox、Chrome、Safari(最新版本)和 Explorer 8、9、10 中重新测试了第二小提琴。在所有这些中都可以正常工作。

    注意:图像元素必须显示为inlineinline-block,并以text-align: center 水平居中(在包装元素上)。

    // ALL of the JS below is for demonstration purposes only
    
    $(document).ready(function() {
      $('a').click(function() {
        $('body > div').toggleClass('overflow');
      });
    })
    img {
      margin: 0 -9999% 0 -9999%;
    }
    
    
    /* ALL of the CSS below is for demonstration purposes only */
    
    body {
      text-align: center;
      font-family: verdana;
      font-size: 10pt;
      line-height: 20pt;
    }
    
    body>div {
      margin: 0px auto;
      width: 40%;
      background-color: lightblue;
      overflow: hidden;
    }
    
    img {
      vertical-align: top;
    }
    
    .overflow {
      overflow: visible;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div>40% wide div [<a href="#">toggle overflow</a>]
      <div>
        <img src="http://via.placeholder.com/400x200" />
      </div>
      400px wide image
    </div>

    【讨论】:

    • +10 这完全可行,并节省了对底层 HTML 的重写。
    • 有人知道支持的浏览器范围吗?
    • 我希望有一种方法可以为答案添加书签。这是那些没有记录并节省工作时间的稀有宝石之一。附言IMO 这应该是一个公认的答案。
    • 在Chrome中测试,只有在不设置图片宽高属性的情况下才有效。
    • 对不起,我在 jsFiddle 之外进行了测试,但无法重现。可能使用非常宽的图像的第一个小提琴。我在 Firefox、Chrome、Safari(最新版本)和 Explorer 8、9,10 中重新测试了第二把小提琴(边距:0 -9999% 0 -9999%)。在所有这些中都可以正常工作。谢谢。
    【解决方案4】:

    我找到了另一个解决方案

    <style type="text/css">
        .container {
            width:600px; //set how much you want
            overflow: hidden; 
            position: relative;
         }
         .containerSecond{
            position: absolute; 
            top:0px; 
            left:-100%; 
            width:300%;
         }
         .image{
            width: 800px; //your image size 
         }           
    </style>
    

    在正文中

    <div class="container">
       <div class="containerSecond">
           <image src="..." class="" />
       </div>
    </div>
    

    无论您的容器更大或更小,这都会使您的图像居中。在这种情况下,您的图像应该大于容器的 300% 才能不居中,但在这种情况下,您可以使 containerSecond 更大,它会起作用

    【讨论】:

      【解决方案5】:

      使用 css transform,在具有overflow: hidden 和设置宽度的容器内的图像:

      img {
          position: relative;
          left: 50%;
          transform: translateX(-50%);
          display: block; /* optional */
      }
      

      jsFiddle here(我借用了 Mathijs Flietstra 的 jsFiddle 的一部分,非常感谢)。

      【讨论】:

      • 您还应该包含 -webkit-transform css 属性以使其在 iOS 上工作。
      猜你喜欢
      • 1970-01-01
      • 2013-02-28
      • 2012-12-24
      • 2012-01-03
      • 1970-01-01
      • 1970-01-01
      • 2014-06-02
      • 1970-01-01
      相关资源
      最近更新 更多