使用 javascript 将 div 垂直居中答案

【问题标题】：using javascript to vertically center a div使用 javascript 将 div 垂直居中
【发布时间】：2015-09-14 02:23:22
【问题描述】：

我试图在 Wordpress 的窗口中间垂直放置一个 div。我有一个带有以下代码的 function.js 文件：

function setToCenter()
{   
    var a = document.getElementById("R_center");
    var h = window.innerHeight;

    var p = (h/2)-(650/2);      
    if( p < 80 ){ p = 80; }//limit to header height


    //a.style.transform = "transform(0,"+p+"px)";
    //a.style.margin-top= p+"px"; 
    a.style.paddingTop = p+"px";   
}

还有一个获取帖子内容的php文件：

<?php
/*
Template Name: Page R Center
*/
?>
<?php global $optimizer;?>
<?php get_header(); ?>

                <div id="R_center" class="R">

                        <script type="text/javascript"> setToCenter(); </script>

                        <?php if(have_posts()): ?><?php while(have_posts()): ?><?php the_post(); ?>
                        <div <?php post_class(); ?> id="post-<?php the_ID(); ?>">  

                                        <div class="thn_post_wrap">
                                            <?php the_content(); ?>
                                        </div>

                        </div>

                        <?php endwhile ?>

                </div><!--R_center class END-->

                        <?php endif ?>

<?php get_footer(); ?>

在我的 header.php 中：

<script type="text/javascript" src="http://localhost/wp/wp-content/themes/r-child/assets/js/functions.js"></script>

一切都运作良好。 Div 位于我屏幕的垂直中间。但是因为 Div 是在 java 脚本之后呈现的，所以它仅在刷新页面后才起作用。我的问题是我必须在哪里放置我的 javascript 以避免刷新？我可以从我的functions.js 执行所有内容而不在我的php 中调用函数吗？谢谢

【问题讨论】：

您可以使用 CSS 垂直对齐到中间

标签： javascript php css wordpress

【解决方案1】：

在您的情况下，您需要在浏览器加载 DOM 后启动 setToCenter 函数。你应该把它包装成DOMContentLoaded event，例如：

document.addEventListener("DOMContentLoaded", function(event) {
    setToCenter();
});

或者如果你使用 jQuery：

$(function(){
    setToCenter();
});

【讨论】：

【解决方案2】：

最简单的方法是将函数调用放在页脚附近，即使您也可以将其放在页脚之后。这将解决你的问题。你问过“你能把代码放在 function.js 中吗？”是的，你也可以这样做。只需将函数调用放在 window.load 函数中，并将此代码放入 function.js 文件中。以下是这两种情况的示例。

$(window).load(function() { setToCenter(); });

或

<?php
/*
Template Name: Page R Center 
*/
?>
<?php global $optimizer;?>
<?php get_header(); ?>

            <div id="R_center" class="R">

                    <?php if(have_posts()): ?><?php while(have_posts()): ?><?php the_post(); ?>
                    <div <?php post_class(); ?> id="post-<?php the_ID(); ?>">  

                                    <div class="thn_post_wrap">
                                        <?php the_content(); ?>
                                    </div>

                    </div>

                    <?php endwhile ?>

            </div><!--R_center class END-->

                    <?php endif ?>
<?php get_footer(); ?>
<script type="text/javascript"> setToCenter(); </script>

【讨论】：