vertical-align 演示

by jun wang

HTML

<!-- left mark-up -->
xx<span class="icon middle" id="first">xx</span> Centered?

<!-- right mark-up -->
<span class="icon middle">xx</span>
<span class="middle">Centered!</span>


<div>


  <button onclick="changeStyle('text-bottom')">
    text-bottom
  </button>
  <button onclick="changeStyle('text-top')">
    text-top
  </button>
  <button onclick="changeStyle('top')">
    top
  </button>
  <button onclick="changeStyle('middle')">
    middle
  </button>
  <button onclick="changeStyle('baseline')">
    baseline
  </button>
  <button onclick="changeStyle('bottom')">
    bottom
  </button>

</div>

CSS

.icon {
    display: inline-block;
    background-color: #C0C0C0;
  }
  
  .middle {
    /* vertical-align: middle; */
  }

JavaScript

function changeStyle(value) {

  document.getElementById("first").style.verticalAlign = value;

}