javascript - 使用javascript和css的垂直居中出错

Question

我正在尝试编写一个 CSS 和 JavaScript 来使类 viralign 中的 div 垂直居中。

<div id="welcome" class="width80 pad5">
    <div class="col-3 vircon">
        <div class="viralign">
            <div>
                image here
            </div>
            <div>
                text
            </div>
        </div>
    </div>
    <div class="col-3 vircon">
        <div class="viralign">
            <div>
                image here
            </div>
            <div>
                text
            </div>
        </div>
    </div>
    <div class="col-3 vircon">
        <div class="viralign">
            <div>
                image here
            </div>
            <div>
                text
            </div>
        </div>
    </div>
</div>

CSS 类

.width80{
    width:80%;
    margin:0px auto;}
.pad5{padding:5px;}
.col-3{
    width:33.33%;
}

JavaScript 代码

function virAlignNavBar(){
    var vircon = document.getElementsByClassName('vircon');
    var viralign = document.getElementsByClassName('viralign');
    for(var i=0; i < vircon.length; i++){
        var x=vircon[i].offsetHeight;
        var y=viralign[i].offsetHeight;
        viralign[i].style.top=((x/2)-(y/2)+"px");
        viralign[i].style.position="absolute";
        vircon[i].style.position="relative";
        }
}

问题是所有类 vircon 的 div 都出现在彼此之上。我该如何解决这个问题？

jsfiddle 我需要 div 是这样的。 col-3 类划分了三个 div 之间的区域，函数使三个 div 中每个上方的区域等于其下方的区域。

Answer 1

您必须将 float="right" 添加到您的函数中。

jsfiddle