1

嗨，请看一下我的网站，下面是有问题的代码片段，因为我对 css-html 方法没有任何运气，所以我必须将图像居中。问题是因为它设置为等待 document.ready() 有时它会将我所有的图像放在右边。我试过 window.load() 但图像以较小的窗口大小在屏幕外居中。也有人建议我试试

<div style="
  background: url('Assets/image.png') center center no-repeat;
  width: 100%;
  height: 500px;
 ">
 </div>

但这会导致它失去响应能力。我四处搜索，但找不到解决方案，我只需要我的图像（和一个表格）保持居中，并让图像随窗口大小缩小。

网站：http ://bit.ly/11nAQJK

<script type="text/javascript"> //Centering Script


$(document).ready(function () {
    updateContainer();
    $(window).resize(function() {
        updateContainer();
    });
});


function updateContainer() {


(function ($) {
$.fn.vAlign = function() {
    return this.each(function(i){
    var h = $(this).height();
    var oh = $(this).outerHeight();
    var mt = (h + (oh - h)) / 2;    
    $(this).css("margin-top", "-" + mt + "px"); 
    $(this).css("top", "50%");
    $(this).css("position", "absolute");    
    }); 
};
})(jQuery);

(function ($) {
$.fn.hAlign = function() {
    return this.each(function(i){
    var w = $(this).width();
    var ow = $(this).outerWidth();  
    var ml = (w + (ow - w)) / 2;    
    $(this).css("margin-left", "-" + ml + "px");
    $(this).css("left", "50%");
    $(this).css("position", "absolute");
    });
};
})(jQuery);
4

5 回答 5

3

删除整个脚本。把它放在你的 CSS 中。

img{
    display: block;
    margin: 0 auto;
}
于 2013-06-08T22:25:59.490 回答
0

居中响应大小的元素

/* element/id/class */ 
/* margin is 100 - width / 2 */

img {
width:34%;    
margin: 0 33%;
}
于 2013-06-09T01:09:57.837 回答
0

做就是了

<style>
a{
display:block;
text-align:center;
}

</style>



<a href="Assets/OrderSheet.xls">
    <img src="Assets/OrderSheet.png" class="image">
</a>

无需重新定位

小提琴

于 2013-06-08T22:32:53.860 回答
0

如果您不接受其他人建议的方法，我建议使用em's. 最好在任何地方使用它们，但您可以将它们应用于您的图像。

然后通过更改不同屏幕尺寸的基数，media queries使用在 中指定的值放大/缩小所有元素。em'sfont-size

于 2013-06-09T00:24:47.673 回答
0

不需要js，单靠CSS就可以了。将图像设置为显示块，设置宽度和最大宽度加上边距自动。

img {
display: block;
width: 300px;
max-width: 100%;
margin: 0 auto;
}
于 2013-06-08T22:59:03.387 回答