Question

我已经看过许多垂直水平滚动和居中内容的例子，但没有一个组合 - 这似乎创造了一个真正的挑战！（头疼！）

这就是我所处的位置 - 页面滚动得很好，但内容不是垂直居中的，图像周围有间距（由白色空间引起：nowrap; ??）

<style type="text/css">
    body{
        background:#272727;
    }

    .wrapper {
        display: table;
        table-layout: fixed;
        width: 100%;
        height: 100%;
        overflow: auto;
    }

    .container {
        display: table-cell;
        vertical-align: middle;
    }

    .content {
        float:left;
        white-space: nowrap;
        padding:0;
        margin:0;    
    }

    img {
        display:inline;
        border:none;
        padding:0;
        margin:0;
    }
</style>

Answer 1

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script>
$(document).ready(function(){
var screenHeight = $(document).height();
var contentHeight = 733;
var difference = (screenHeight - contentHeight)/2;
alert(difference);
$('.content').css({'margin-top': difference});
});

</script>

图像的水平滚动页面没有边框/填充并且在页面上垂直居中！可能？

1 个答案: