Getting viewbox in the middle on all browsers and platforms

Question

I think this is what I'm trying to do.

Vertically Aligning SVG In The Middle

This is exactly how I want it to look, but the viewbox gets positioned in all different locations after putting the code in.

This is exactly how I want the viewbox to be positioned.

It's 'Not' positioned in the middle on jsfiddle

https://jsfiddle.net/depuqx0p/

But it's positioned in the middle on CSSDESK

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

It's 'Not' positioned in the middle on jsbin

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

But it's positioned in the middle on w3schools

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

It's 'Not' positioned in the middle on Stack Overflow

And I'm trying to put it in the middle on Blogger, where its shown it's 'Not' positioned in the middle.

Blogger

https://testpage34567.blogspot.com/

It also seems to be positioned differently in all browsers.

What can I do/implement to fix/resolve the issue?

I mainly want to put it on blogger, but I don't know what I can do to fix the issue, and don't know what's causing the issue.

Code:

<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>

score 0 · Answer 1 · 2017-10-16T00:17:43.817

The Answer

This seems to be the best solution, unless you know something different.

Adding

display: inline-block;vertical-align: middle; to 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>

score 0 · Answer 2 · answered Oct 17 '17 at 10:27

0

To center elements in the middle (horizontally) you should either use margin: 0 auto on the element or content-align: center on the parent. Use case depends on the situation.

To center elements in the middle (vertically) is a bit harder as you need to know exact measures between your element and the top of the page, but if you have an element that has hight: 50px and there're no margins/paddings at all you can use margin-top: calc(50vh - 25px); which will create a margin at the top of your element equal to 50% of the viewport hight (screen hight) minus 25px (half of your elements hight.

answered Oct 17 '17 at 10:27

anteAdamovic

1,462
12
23

Is there anything wrong with using: display: inline-block;vertical-align: middle on the element, Cause that worked for me? – Oct 17 '17 at 10:32
If you simply want to align it inside the parent element no it's fine, but it won't always work. Also it won't work well if you want to center it in the middle of the screen. – anteAdamovic Oct 17 '17 at 10:47
What do you mean, it won't always work? It did in this case. It's not being centered in the middle of the screen. And thanks. – Oct 17 '17 at 10:50
Do you even understand what `display: inline-block` and `vertical-align: middle` are ? https://www.w3schools.com/cssref/pr_class_display.asp https://www.w3schools.com/cssref/pr_pos_vertical-align.asp – anteAdamovic Oct 17 '17 at 10:53
Why does it work on elements also? display: none; vertical-align: middle works too. – Oct 17 '17 at 10:56

Paul LeBeau · Accepted Answer · 2017-10-17T11:59:11.807

0

Your problem is that you are trying to use display: inline-block. That is the wrong choice. inline-block places images on the baseline of the text. The browser reserves space under the baseline for any descenders that might be in the line of inline text. This is why there is a bigger space below the SVG compared with above it.

The correct choice is to use display: block. Then you will also need to use margin: 0 auto to centre the SVG in its parent button.

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>

There are other, more kludgey solutions also. Such as setting font-size: 0 on the button. But the solution above is IMO the correct one.

edited Oct 17 '17 at 11:59

answered Oct 17 '17 at 11:51

Paul LeBeau

97,474
9
154
181

If I have text in the middle, then I would use inline-block, correct? And with an image I would use: inline-block with background-position: center. But how come with an image, unlike with an element, an image it is automatically vertically centered along with text? PNG https://jsfiddle.net/yux31tjv/ / Text https://jsfiddle.net/guxp29h2/ Why don't those need to be vertically centered, but elements do? – Oct 17 '17 at 18:54
If you only had text, you wouldn't need `inline-block` you could just leave the text as inline text. In your first image you are using a background image on the button, so it doesn't matter whether the content is `inline-block` or not. There is no text in your second link, so I don't understand what you are asking there. – Paul LeBeau Oct 17 '17 at 19:19
If I understand you correctly, what you're saying is, Not all button codes require a display property. Correct? – Oct 17 '17 at 20:33
Well yes. My whole point was that images that are `display: inline-block` behave differently to ones that are `display: block`. The former is for when you want your image to align relative to the baseline of some text. – Paul LeBeau Oct 17 '17 at 22:33
Take this one for example. Is a display needed at the top of the button here, or does it not need one there? – Oct 17 '17 at 23:16
` – Paul LeBeau Oct 18 '17 at 09:35
ok, thanks for that. Then I'll just leave it out then if it's not needed. – Oct 18 '17 at 09:37
How would I center horizontally and vertically an SVG inside a div tag? I tried doing "display:block;margin: 0 auto;" And that doesn't seem to work. https://jsfiddle.net/c0qshm0t/5/ – Oct 18 '17 at 23:17
`margin: 0 auto` only centres horizontally. Vertical centering is a common question and [there are a number of solutions](https://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div). When it is an SVG you are centering, there is an additional option: [if you have a `viewBox`, you can just set the height of the SVG to the same as the parent div](https://jsfiddle.net/c0qshm0t/12/). – Paul LeBeau Oct 19 '17 at 01:16
Thank you. How would I center an SVG inside another SVG, like the one below in this code? https://jsfiddle.net/c0qshm0t/14/ – Oct 19 '17 at 01:51
I tried doing it the way you suggested above, but that didn't work. – Oct 19 '17 at 01:58
We've veered off topic now. Please ask a new question for this. – Paul LeBeau Oct 19 '17 at 05:01
Can you how me how to use this piece of code please? https://jsfiddle.net/9ckL5fdu/1/ – Oct 20 '17 at 12:32

Getting viewbox in the middle on all browsers and platforms

3 Answers3