1

こんにちは、私のサイトを見てください。以下は問題のコード スニペットです。私は css-html メソッドで運がなかったので、画像を中央に配置する必要があります。問題は、 document.ready() を待つように設定されているため、すべての画像が右側に配置されることがあります。window.load() を試してみましたが、小さなウィンドウサイズでは画像が画面外に中央に表示されます。試してみることも提案されました

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

しかし、これにより応答性が失われます。私は周りを検索しましたが、解決策が見つかりません。画像（および1つのフォーム）を中央に配置し、画像をウィンドウサイズに合わせて縮小する必要があるだけです。

サイト: 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

ただする

<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

レスポンシブ サイズの要素を中央に配置する

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

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