veritcal-align数值与对齐实例页面

展示

字母x

文字的vertical-align值： baseline 10px -10px 1ex -1ex 50% -50%

代码

• HTML：

  <span id="vAlign">字母x</span><img src="/images/common/m/1.jpg" width="128" height="92">
  <p>文字的vertical-align值：<select id="select">
      <option value="baseline">baseline</option>
      <option value="10px">10px</option>
      <option value="-10px">-10px</option>
      <option value="1em">1ex</option>
      <option value="-1em">-1ex</option>
      <option value="50%">50%</option>
      <option value="-50%">-50%</option>
  </select></p>

• JS：

  var eleSelect = document.getElementById('select');
  var eleValign = document.getElementById('vAlign');
  
  if (eleSelect && eleValign) {
      eleSelect.onchange = function() {
          eleValign.style.verticalAlign = this.value;
      };
  }