Need to center image in web page via 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>
加载中,请稍侯......
精彩评论