AutoMargin in div

by Alex D

HTML

<div class="ans-container">
        <div class="answer">
                <div class="text">ANSWER FOR dssdsdfsdfsdfsdfsdfsdfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffTHIS QUESTION  hjkhkjhkjhkhjk jhjhkhkjh hjkhkjh</div>
            </div>
            
            <div class="answer">
                    <div class="text">ANSWER FOR THIS QUESTION  hjkhkjhkjhkhjk jhjhkhkjh hjkhkjh</div>
                </div>
            </div>

CSS

.ans-container{
	margin:auto;
	height: 300px;
	vertical-align:middle;
	display:table-cell;
	width: 550px; /*потому что надо так*/
    border:solid 1px black;
}
/*.answer{height:100px;}*/

JavaScript

function autoMargin(){
			var allHeight=document.querySelector('.ans-container').offsetHeight,
					elements=document.querySelectorAll('.answer'),
					elementsHeight=0,
					margin;

				for (i = 0; i < elements.length; i++) {
					elementsHeight += elements[i].offsetHeight;
					//console.log(i + ' - ' + elements[i].offsetHeight);
				}
				
				margin =  ((allHeight - elementsHeight)/(elements.length+1)) ;
				
				for (i = 0; i < elements.length; i++) {
					elements[i].style.margin = margin+'px 0';
				}

		}

autoMargin();