在所有浏览器和平台上获取中间视图框

Question

我认为这就是我想要做的事情。

在中间垂直对齐SVG

这正是我希望它看起来的样子，但是在放入代码后，视图框会定位在所有不同的位置。

这正是我想要定位视图的方式。

它＆＃39;不是＆＃39;位于 jsfiddle

的中间位置

https://jsfiddle.net/depuqx0p/

但它位于 CSSDESK

的中间位置

http://www.cssdesk.com/2bf6V

它＆＃39;不是＆＃39;位于 jsbin

的中间位置

https://jsbin.com/majeyiboto/edit?html,output

但它位于 w3schools

的中间位置

https://www.w3schools.com/code/tryit.asp?filename=FKJGG1IEB6TN

它＆＃39;不是＆＃39;位于 Stack Overflow

的中间位置

我试图将它放在Blogger的中间位置，它显示了它的“不是”#B;＆＃39; Not＆＃39;位于中间。

博客

https://testpage34567.blogspot.com/

在所有浏览器中，它似乎也有不同的定位。

我可以做些什么/实施来解决/解决问题？

我主要想把它放在博客上，但我不知道我能做些什么来解决这个问题，而且不知道导致这个问题的原因。

代码：

＆＃13;

＆＃13;

<button id="playButton2" style="display:block;width: 606px;height:50px;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;color:#000000;" onclick=" 
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
  document.querySelector('#playButton2 .initial').style.display='none';
  document.querySelector('#playButton2 .pause').style.display='none';
  document.querySelector('#playButton2 .play').style.display='none';
player.volume=1.0; if (player.paused) {
document.querySelector('#playButton2 .pause').style.display='inline-block';
    playButton2.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('#playButton2 .play').style.display='inline-block';
    playButton2.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 style="display: none;background-color: red;" class="play" width="39" height="40" viewBox="5 8 50 56">

  </svg>

 <svg style="display: none;background-color: red;" class="pause" width="39" height="40" viewBox="0 -3.4 24 24">

    </svg>

  <svg class="initial" width="39" height="40" style="background-color: red;" viewbox="5 8 50 56">
    </svg>

</button>

<audio id="player2" style="display:none;">
  <source src='' type='audio/mpeg'></source>
</audio>

＆＃13;

＆＃13;

＆＃13;

Answer 1

答案

这似乎是最好的解决方案，除非你知道不同的东西。

添加

display: inline-block;vertical-align: middle;到SVG

<button id="playButton5" style="display:block;width: 606px;height:50px;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;color:#000000;" onclick=" 
var button = document.getElementById('playButton5');
var player = document.getElementById('player5');
  document.querySelector('#playButton5 .initial').style.display='none';
  document.querySelector('#playButton5 .pause').style.display='none';
  document.querySelector('#playButton5 .play').style.display='none';
player.volume=1.0; if (player.paused) {
document.querySelector('#playButton5 .pause').style.display='inline-block';
    playButton5.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('#playButton5 .play').style.display='inline-block';
    playButton5.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 style="display:none; vertical-align: middle; background-color: red;" class="play" width="39" height="40" viewbox="5 8 50 56">
  </svg>

 <svg style="display:none; vertical-align: middle; background-color: red;" class="pause" width="39" height="40" viewbox="0 -3.4 24 24">
    </svg>

  <svg class="initial" width="39" height="40" style="background-color: red; display: inline-block;vertical-align: middle;"  viewbox="5 8 50 56">
</svg>

</button>

<audio id="player5" style="display:none;">
  <source src='' type='audio/mpeg'></source>
</audio>

Answer 2

要将元素置于中间（水平）中心，您应该在元素上使用margin: 0 auto或在父元素上使用content-align: center。 用例取决于具体情况。

要使中间元素（垂直）居中有点困难，因为您需要知道元素与页面顶部之间的确切度量，但如果您的元素具有hight: 50px并且存在没有任何边距/填充你可以使用margin-top: calc(50vh - 25px);，它会在你的元素顶部创建一个边距，相当于视口高度的50％（屏幕高度）减去25px（你的元素的一半高。

Answer 3

您的问题是您正在尝试使用display: inline-block。这是错误的选择。 inline-block将图片放在文字的基线上。浏览器为可能位于内联文本行中的任何descenders保留基线下的空间。这就是为什么SVG下面有一个更大的空间与之相比。

正确的选择是使用display: block。然后，您还需要使用margin: 0 auto将SVG置于其父按钮中心。

function togglePlay()
{
  var button = document.getElementById('playButton2');
  var player = document.getElementById('player2');
  document.querySelector('#playButton2 .initial').style.display='none';
  document.querySelector('#playButton2 .pause').style.display='none';
  document.querySelector('#playButton2 .play').style.display='none';
  player.volume=1.0;
  if (player.paused) {
    document.querySelector('#playButton2 .pause').style.display='block';
    playButton2.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('#playButton2 .play').style.display='block';
    playButton2.style.background = 'linear-gradient( to right, #000000 198px,#0059dd 198px, #0059dd 201px, #000000 21px, #000000 399px, #0059dd 399px, #0059dd 402px, #000000 402px )';
    player.pause();
  }    
}

<button id="playButton2" style="display:block;width: 606px;height:50px;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;color:#000000;" onclick="togglePlay() 
">
    
  <svg style="display: none; margin: 0 auto; background-color: red;" class="play" width="39" height="40" viewBox="5 8 50 56">
  </svg>

  <svg style="display: none; margin: 0 auto; background-color: red;" class="pause" width="39" height="40" viewBox="0 -3.4 24 24">
  </svg>

  <svg class="initial" width="39" height="40" style="display:block; margin: 0 auto; background-color: red;" viewBox="5 8 50 56">
  </svg>

</button>

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

还有其他更多的kludgey解决方案。例如在按钮上设置font-size: 0。但上面的解决方案是IMO正确的解决方案。