вертикальный центр с использованием javascript и css идет не так

Question

Я пытаюсь написать CSS и JavaScript в центральные divs внутри класса viralign по вертикали.

<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 clases

.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 появляются друг над другом. Как я могу это решить?

jsfiddle мне нужны дивы, чтобы быть. класс col-3 разделяет область между тремя divs, а functoin делает область над каждым из трех divs равным ares под ней.

Answer 1

Вы должны добавить float="right" к вашей функции.

jsfiddle

Answer 2

Удалить позицию абсолютную и относительную.

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

.width80{ 
 
    \t width:80%; 
 
    \t margin:0px auto;} 
 
    .pad5{padding:5px;} 
 
    .col-3{ 
 
\t width:30.33%; 
 
    margin-right:10px; 
 
    float: left; 
 
    text-align: center; 
 
}

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

Рабочая JSFilddle http://jsfiddle.net/anqy6Lxo/3/