【问题标题】:Need to center image in web page via CSS需要通过 CSS 在网页中居中图像
【发布时间】:2011-01-30 22:14:18
【问题描述】:

即使在调整浏览器大小时,我也希望将图像在页面中垂直和水平居中。

目前,我使用这个 CSS:

.centeredImage {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -150px;
}

还有这个 HTML:

<img class="centeredImage" src="images/logo.png">

它以 FF 为中心,但不在 IE 中(图像中心位于左上角)。有什么想法吗?

-机器人

【问题讨论】:

  • 你“知道”图像高度吗?
  • 是的,尽管显然额外的信用问题是如何对任何图像进行通用处理。

标签: css image center


【解决方案1】:

我是这样解决的:

img.class-name{

    position: absolute;
    margin: auto;
    left: 0; 
    right: 0;
    top: 0;
    bottom: 0;  
}

【讨论】:

  • 适用于当前版本的 Opera、Chrome、Firefox 和 Safari。 IE 有人吗?
【解决方案2】:

试试这个:

position: absolute

【讨论】:

  • 成功了……现在尝试让它适用于任何动态调整图像宽度和高度的图像。
  • jquery 会帮助你。
  • @Tesserex 从什么时候开始 jQuery 被认为是 CSS?
【解决方案3】:

通用的 KISS(“保持简单和愚蠢”)方式:

<p style="text-align: center;"> <img src="myImage.png" /></p>

【讨论】:

    【解决方案4】:

    这是一个棘手的方法,但它有效:

    CSS:

    html, body, #wrapper {
       height:100%;
       width: 100%;
       margin: 0;
       padding: 0;
       border: 0;
    }
    #wrapper td {
       vertical-align: middle;
       text-align: center;
    }
    

    HTML:

    <html>
    <body>
       <table id="wrapper">
          <tr>
             <td><img src="my_cool_image.png" alt="hello world" /></td>
          </tr>
       </table>
    </body>
    </html>
    

    【讨论】:

      【解决方案5】:
      text-align:center;
      
      vertical-align:middle;
      

      vertical-align

      应该是诀窍

      【讨论】:

      • 请注意,text-align 需要应用于容器,而不是图像。垂直对齐对我也不起作用,用 IE7 测试。
      【解决方案6】:

      如果提供的答案在每个浏览器中都不起作用和/或不一致,您可能想试一试:

      http://andreaslagerkvist.com/jquery/center/

      text-align:center;
      

      不过应该​​得到它。

      【讨论】:

      • 那个jQuery插件看起来很棒,虽然我用的是ExtJS,所以我得看看能不能翻译一下。
      • 啊,可能存在等效插件。不熟悉 ExtJS。
      【解决方案7】:

      明确:两者都有; 边距:自动;

      【讨论】:

        【解决方案8】:

        解决方案:

         .centeredImage {
              position: absolute;
              top: 50%;
              left: 50%;
              margin-top: image-height/2;
              margin-left: image-width/2;
            }
        

        既然你提到了:

         margin-top: -50px;
         margin-left: -150px;
        

        如果它与中心正确对齐,那么您的图像高度将为 50x2=100px; & 宽度 150x2=300px;

        【讨论】:

          【解决方案9】:
          .image {
              position: fixed;
              margin: auto;
              left: 0;
              right: 0;
              top: 0;
              bottom: 0;
           }
          

          【讨论】:

            【解决方案10】:

            我做到了!这种方法坚如磐石,适用于所有主要浏览器。

            style="position: fixed; margin: 0 50%; left: -850px; right: 0; top: 0; bottom: 0;" 
            

            我只使用了图像一半宽度的左侧,然后使用边距将其分流。工作一种享受:)

            【讨论】:

            • 您是否在不同的窗口宽度下尝试过这个 - 即响应式?
            【解决方案11】:

            有一个非常简单的跨浏览器自动调整大小的方法。拍摄宽度为 200 像素的图像。取一半宽度,然后执行以下操作:

               #imgcent1 {
               left: calc (100% - 100px  /  2 );
               /*rest of code*/
               }
            

            确保有“空白”以避免负数和正数(最好对所有操作数使用此约定)。它会自动调整大小。试试吧,希望在其他浏览器上的测试能确保它成为预期的标准。

            【讨论】:

              【解决方案12】:

              IE 与 position: fixed 存在问题(以及其他一百万个问题),因此如果兼容性很重要,我建议不要这样做。

              如果容器不必滚动,请使用position: absolute。否则,您将需要一些 js 来在滚动时调整图像的顶部和左侧。

              text-align: center 如果应用于图像的容器应该可以工作,但不能应用于图像本身。但当然,这只涉及水平,而不是垂直。 vertical-align: middle 对我不起作用,即使容器足够大。

              自动边距在 IE 中不起作用,至少在我测试时是这样。

              【讨论】:

                【解决方案13】:

                网络上的单个图像和响应式

                背景图片:

                /image.png

                CSS:

                html, body { height: 100%; margin: 0px; }
                
                .bg-image {
                    width: 100%;
                    height: 100%;
                    background-image: url(image.png);
                    background-repeat: no-repeat;
                    background-position: center center;
                    background-size: contain;
                    text-indent: -9999px;
                }
                

                HTML:

                <body>
                    <div class="bg-image">Some text not displayed</div>
                </body>
                

                【讨论】:

                  猜你喜欢
                  • 2011-01-23
                  • 2023-03-16
                  • 2012-03-01
                  • 2015-07-22
                  • 2020-07-21
                  • 2018-02-05
                  • 2014-07-06
                  • 1970-01-01
                  相关资源
                  最近更新 更多