Vertically aligning text using Dom properties

JavaScript
1

How would I vertical align this text using dom properties?

I tried this, it isn’t working.
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>
3

@Paul_Wilkins gave you a comprehensive reference for methods of centering, both horizontally and vertically.

https://css-tricks.com/centering-css-complete-guide/

1 Like
4

I was told this:


.fm-text { vertical-align: middle; }

But that’s css, and I can’t seem to get it to work.

5

Read this, which will explain why:

https://tympanus.net/codrops/css_reference/vertical-align/

2 Likes
6

Here you go…

   playButton.style.lineHeight = '44px';

coothead

2 Likes
7

@asasass: do you understand why coothead’s solution worked, so you can use it again in future?

3 Likes
8

The line-height property sets the amount of space used for lines, such as in text. On block-level elements, Yes, now I do.

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.