<h2>استفاده از ویژگی <code>vertical-align</code> روی عناصر درون خطی </h2>

<div class="va">
  <input type="email"> مثال
</div>

<div class="vabtn">
  <button>baseline</button>
  <button>top</button>
  <button>text-top</button>
  <button>text-bottom</button>
  <button>super</button>
  <button>sub</button>
  <button>middle</button>
  <button>bottom</button>
</div>

body {direction:rtl;
  text-align: center;
}

.va {
  margin-top: 40px;
  font-size: 60px;
  line-height: 1.3;
}

.vabtn {
  margin-top: 50px;
}

.va input {
  vertical-align: baseline;
  font-size: 14px;
}

.p {
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding-top: 130px;
}

var vabtns = document.querySelector('.vabtn').querySelectorAll('button');

for(var i=0;i < vabtns.length; i++) {
   (function(index) {
     vabtns[index].addEventListener('click', function(){
       document.querySelector('.va input').style.verticalAlign = vabtns[index].innerHTML;
     });
   })(i);
}