Need to center image in web page via CSS_问答_开发者

Need to center image in web page via CSS

开发者 https://www.devze.com 2022-12-23 17:44 出处：网络

I\'d like to center an image in a page both vertically and horizontally even when the browser is resized.

相关专题：center css

I'd like to center an image in a page both vertically and horizontally even when the browser is resized.

Currently, I use this CSS:

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

And this HTML:

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

It centers in FF bu开发者_如何转开发t not IE (image center is placed at upper left corner). Any ideas?

-Robot

I solved it this way:

img.class-name{

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

Try using this :

position: absolute

the universal KISS ("keep it simple and stupid") way:

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

This is a tricky way, but it works:

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>

text-align:center;

vertical-align:middle;

vertical-align

Should to the trick

If the supplied answers do not work and/or not consistent in each browser you may want to give this a shot:

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

text-align:center;

Should get it, though.

clear: both; margin: auto;

Solution:

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

since you mentioned:

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

And if its aligning properly to the center then your image height would be 50x2=100px; & width 150x2=300px;

.image {
    position: fixed;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
 }

I did it! This method is rock solid and works on all major browsers.

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

I have simply used a left of half the width of the image and then shunted it across using margin. Works a treat :)

There is a very simple, cross browser, auto resize method. Taking an image with width of 200px. Take half the width then do the following:

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

Make sure there is "white space" to avoid negative and positive numbers (best using this convention for all operands). It will auto resize. Just try it and hopefully, testing on other browsers will ensure that it becomes the standard as intended.

IE has issues with position: fixed (along with a million other things), so I would advise against that if compatibility is important.

Use position: absolute if the container doesn't have to scroll. Otherwise you'll need some js to adjust the top and left of your image as you do scroll.

text-align: center should work if applied to the image's container, but not to the image itself. But of course that only addresses the horizontal, not vertical. vertical-align: middle doesn't work for me, even with a large enough container.

Auto margins don't work in IE, at least when I test it.

A single image on the web & responsive

Background Image:

/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>

Need to center image in web page via CSS

精彩评论

关注公众号

热门标签

图文推荐

Need to center image in web page via CSS

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：