Question

我在网上发现了一个jquery脚本来垂直对齐内容。但是，当我调整浏览器窗口大小时，我需要刷新页面以使jquery脚本再次工作。您可以在下面找到我的代码。我非常感谢任何帮助。我是javascript场景的新手。提前谢谢！

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vAlign Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style media="all">
body, html {
    height: 100%;
    margin: 0;
}

    nav{
        height: 20%;
        background-color: red;
    }

    .container{
        height: 60%;
        background-color: orange;
    }

    .valignmiddle{
    }

    .fleft{
        width: 50%;
        box-sizing: border-box;
        padding-left: 2%;
        text-align: justify;
        float: left;
    }

    .flright{
        width: 50%;
        float: right;
        box-sizing: border-box;
        padding-left: 2%;
    }

    footer{
        height: 20%;
        background-color: purple;
    }

</style>

</head>
<body>
<nav></nav>
<div class="container" style="width: 100%; height: 60%;">
<div class="valignmiddle">
   <section class="fleft">
    <h3>Contact me</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore cupiditate eligendi, eos voluptas pariatur quisquam facilis, laboriosam laudantium sint fuga, praesentium eveniet suscipit deleniti delectus quo quidem veritatis? Ratione, atque?</p>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore cupiditate eligendi, eos voluptas pariatur quisquam facilis, laboriosam laudantium sint fuga, praesentium eveniet suscipit deleniti delectus quo quidem veritatis? Ratione, atque?</p>
                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore cupiditate eligendi, eos voluptas pariatur quisquam facilis, laboriosam laudantium sint fuga, praesentium eveniet suscipit deleniti delectus quo quidem veritatis? Ratione, atque?</p>
                       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore cupiditate eligendi, eos voluptas pariatur quisquam facilis, laboriosam laudantium sint fuga, praesentium eveniet suscipit deleniti delectus quo quidem veritatis? Ratione, atque?</p>
                           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore cupiditate eligendi, eos voluptas pariatur quisquam facilis, laboriosam laudantium sint fuga, praesentium eveniet suscipit deleniti delectus quo quidem veritatis? Ratione, atque?</p>
                               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore cupiditate eligendi, eos voluptas pariatur quisquam facilis, laboriosam laudantium sint fuga, praesentium eveniet suscipit deleniti delectus quo quidem veritatis? Ratione, atque?</p>
                                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore cupiditate eligendi, eos voluptas pariatur quisquam facilis, laboriosam laudantium sint fuga, praesentium eveniet suscipit deleniti delectus quo quidem veritatis? Ratione, atque?</p>
                                       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore cupiditate eligendi, eos voluptas pariatur quisquam facilis, laboriosam laudantium sint fuga, praesentium eveniet suscipit deleniti delectus quo quidem veritatis? Ratione, atque?</p>
                                           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore cupiditate eligendi, eos voluptas pariatur quisquam facilis, laboriosam laudantium sint fuga, praesentium eveniet suscipit deleniti delectus quo quidem veritatis? Ratione, atque?</p>
                                               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore cupiditate eligendi, eos voluptas pariatur quisquam facilis, laboriosam laudantium sint fuga, praesentium eveniet suscipit deleniti delectus quo quidem veritatis? Ratione, atque?</p>
                                                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore cupiditate eligendi, eos voluptas pariatur quisquam facilis, laboriosam laudantium sint fuga, praesentium eveniet suscipit deleniti delectus quo quidem veritatis? Ratione, atque?</p>
                                                       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore cupiditate eligendi, eos voluptas pariatur quisquam facilis, laboriosam laudantium sint fuga, praesentium eveniet suscipit deleniti delectus quo quidem veritatis? Ratione, atque?</p>



    </section>

    <div class=" flright">
    <h3>aapen</h3>    
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit unde nisi a explicabo perspiciatis corrupti exercitationem temporibus autem odit asperiores molestias, facere rerum error nostrum in. Architecto natus inventore, voluptates.</p>
</div>

</div>


</div>

<footer></footer>

<script>
    $(document).ready(function() {
        $(function() {
    $('.valignmiddle').each(function() {
        $(this).parent().css('position', 'relative');
        $(this).css('position', 'absolute');
        $(this).css('top', '50%');
        $(this).css('left', '0px');
        $(this).css('width', '100%');
    });
    $(window).resize(function() {
        var thisheight = Math.round(parseInt($('.valignmiddle').outerHeight()) / 2);
        $('.valignmiddle').css('margin-top', '-' + thisheight + 'px');
        if(parseInt($('.valignmiddle').outerHeight()) > parseInt($('.valignmiddle').parent().outerHeight())) {

            $('.valignmiddle').parent().outerHeight($('.valignmiddle').outerHeight());

        }
    }).trigger('resize');
});
});

</script>
</body>
</html>

Answer 1

您可以尝试使用body标签上的onresize事件来调用您的javascript函数。

示例： - <body onresize="myFunction()">

在myFunction中，您可以编写代码进行对齐。使用此功能，您无需在调整大小窗口时刷新页面。

Answer 2

使用jquery是没有意义的......

而不是给你你想要的东西，我会给你你需要的东西......垂直对齐的最好方法是这样的（PS：我找不到不支持这个的浏览器，测试过它在IE8中也是如此）;

您可以在行动HERE

中看到它

仅CSS解决方案

#yourdiv{
  position:absolute;
  top:0;
  bottom:0;
  margin:auto;
}

即使您调整屏幕大小，上面的内容也会使div保持垂直居中。

另外，如果你想要绝对中心，只需添加左右参数，如下所示：

#yourdiv{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
}

需要刷新页面才能使jquery工作

2 个答案: