使用Dom属性垂直对齐文本

Question

如何使用dom属性垂直对齐此文本？

https://jsfiddle.net/wt5rrrx1/

我试过这个，它不起作用。

playButton.style.verticalAlign = 'middle'; 

<div id="playButton" style="display:block;width: 606px;height:44px;border-radius:50px;background-image: linear-gradient( to right,#000000 198px,#0059dd 198px, #0059dd 201px, #000000 201px, #000000 399px, #0059dd 399px, #0059dd 402px, #000000 402px );border: 3px solid #0059dd; cursor: pointer;font-family: Tahoma; font-weight: bold;font-size:23px; color:#000000;" 
onclick="var button = document.getElementById('playButton');
var player = document.getElementById('player');
document.querySelector('#playButton .initial').style.display='none';
    document.querySelector('#playButton .pause').style.display='none';
    player.volume=1.0; 
  if (player.paused) {
        document.querySelector('#playButton .pause').style.display='none';
        document.querySelector('#playButton .initial').style.display='none';
        document.querySelector('#playButton .fm-text').innerHTML = '1980s.fm';
playButton.style.textAlign = 'center';
playButton.style.verticalAlign = 'middle'; 
        playButton.style.background = 'linear-gradient( to right, #00ffff 198px,#0059dd 198px, #0059dd 201px, #ffffff 201px, #ffffff 399px, #0059dd 399px, #0059dd 402px, #ff00ff 402px )';
        player.play();
    } else {
        document.querySelector('#playButton .initial').style.display='inline-block';
        document.querySelector('#playButton .fm-text').innerHTML = '';
        playButton.style.background = 'linear-gradient( to right, #000000 198px,#0059dd 198px, #0059dd 201px, #000000 21px, #000000 399px, #0059dd 399px, #0059dd 402px, #000000 402px )';
        player.pause();
    }">

  <svg class="pause" style="display:none ;" width="39" height="40" viewbox="5 8 50 56">
    <path d="M30.001,12C16.767,12,6,22.765,6,35.999s10.766,23.999,24,23.999s24-10.765,24-23.999S43.235,12,30.001,12L30.001,12z" fill="#000000"></path>
    <path fill="#0059dd" d="M39.201,34.34l-12-9c-0.607-0.455-1.419-0.528-2.095-0.189c-0.677,0.339-1.106,1.031-1.106,1.789v18c0,0.758,0.428,1.45,1.106,1.789c0.283,0.142,0.589,0.211,0.894,0.211c0.425,0,0.847-0.136,1.2-0.4l12-9c0.503-0.377,0.8-0.97,0.8-1.6C40.001,35.31,39.705,34.717,39.201,34.34z"></path>
    <path fill="#0059dd" d="M30,15c11.598,0,21,9.402,21,20.999s-9.401,20.999-21,20.999c-11.599,0-21-9.402-21-20.999S18.401,15,30,15 M30,9C15.112,9,3,21.111,3,35.999s12.112,26.999,27,26.999c14.888,0,27-12.111,27-26.999S44.888,9,30,9L30,9z" /></path>
  </svg>

  <svg class="initial" style="margin: 2px 284px; "width="39" height="40" viewbox="5 8 50 56">
    <path d="M30.001,12C16.767,12,6,22.765,6,35.999s10.766,23.999,24,23.999s24-10.765,24-23.999S43.235,12,30.001,12L30.001,12z" fill="#000000"></path>
    <path fill="#0059dd" d="M39.201,34.34l-12-9c-0.607-0.455-1.419-0.528-2.095-0.189c-0.677,0.339-1.106,1.031-1.106,1.789v18c0,0.758,0.428,1.45,1.106,1.789c0.283,0.142,0.589,0.211,0.894,0.211c0.425,0,0.847-0.136,1.2-0.4l12-9c0.503-0.377,0.8-0.97,0.8-1.6C40.001,35.31,39.705,34.717,39.201,34.34z"></path>
    <path fill="#0059dd" d="M30,15c11.598,0,21,9.402,21,20.999s-9.401,20.999-21,20.999c-11.599,0-21-9.402-21-20.999S18.401,15,30,15 M30,9C15.112,9,3,21.111,3,35.999s12.112,26.999,27,26.999c14.888,0,27-12.111,27-26.999S44.888,9,30,9L30,9z" /></path>
  </svg>

  <span class="fm-text"></span>
</div>

<audio id="player" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
</audio>

Answer 1

垂直对齐规则仅适用于带有display = inline或display = table-cell的“容器” 这里解决你的问题（我允许自己清理一下代码）： https://jsfiddle.net/airpanda50/x8ftupab/

display: table-cell;
vertical-align: middle;