これは私のコードです
<style>
.className{
width:55%;
height:auto;
margin:0 auto;
}
body{
text-align:center;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).resize(function(){
$('.className').css({
position:'absolute',
left: ($(window).width() - $('.className').outerWidth())/2,
top: ($(window).height() - $('.className').outerHeight())/2
});
});
// To initially run the function:
$(window).resize();
});
</script>
ページを開くと、DIV が中央に配置されていませんが、ブラウザーのウィンドウを縮小してフル モードで再度開くと、DIV は完全に中央に配置されています。
これ
<script>
$(document).ready(function(){
$(window).resize(function(){
$('.className').css({
position:'absolute',
left: ($(window).width() - $('.className').outerWidth())/2,
top: ($(window).height() - $('.className').outerHeight())/2
});
});
// To initially run the function:
$(window).resize();
});
</script>
これで (TXH TO Elhussein Hashem)
<script>
$(document).ready(function(){
resizeFunction();
window.onresize = function() {
resizeFunction();
};
resizeFunction();
});
function resizeFunction(){
$('.className').css({
position:'absolute',
left: ($(document).width() - $('.className').outerWidth())/2,
top: ($(document).height() - $('.className').outerHeight())/2
});
}
</script>
しかし、結果は変わりません:(
ページを更新しても、ブラウザー ウィンドウを縮小して再度開いたときのように、すべてが中央に戻っていることに気付きました。
これがDIVです
<div class="className">
<div><img style="width:100%" src="http://i39.tinypic.com/5f506d.jpg"/></div>
</div>
PLZHELP ME