Vertical Alignment of SVG in CSS

Question

I have a problem with inline SVG alignment. I have created a button with some text and an SVG. And while the alignment works correctly when the SVG is at least as big as the text it fails when the SVG height is smaller than the text.

I have created a test case with a two-colored background button to indicate where exactly the middle is. You can see if you look closer that the second case is not perfectly aligned because the height of the SVG is less than the one from the text.

Is there any way to fix this? Doing it some other way (no js please)?

Test case: https://goo.gl/KYDKGH

I can't see the issue you describe in your fiddle. what browser(s) are you seeing the issue in? — dewd, Mar 12 '16 at 19:49
Chrome latest version. I'm on a Mac Retina. It's very subtle but it's there. — MyWetSocks, Mar 12 '16 at 19:50
Is it the font? fonts render differently in different engines. also, if you haven't specified a font, you'll get the default, which varies according to browser and o/s. — dewd, Mar 12 '16 at 19:53

L777 · Accepted Answer · 2019-01-07T23:14:16.857

jsfiddle 1 - You can use position:relative on the container and position:absolute on the objects like this:

  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;

The top: 50% moves the object to the container's vertical center picking the top of the object as reference (not its center), so the transform: translateY moves it a distance of 50% of it's size upwards to let it exactly on the middle of the container (by the objects center).

ps: the text-align:center; left:0; right:0; and margin:auto are for horizontal align.

jsfiddle 2 - Or use display:flex on the container with align-items to vertical align the content like this:

  display: -webkit-flex; /* Safari */  
  display: flex;
  -webkit-align-items: center; /* Safari 7.0+ */
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;

ps: the justify content is for horizontal align.

In the first solution, if there is a background, a property `top: 50%` of it breaks. The second, perfect. — rbz, Oct 29 '19 at 17:42
I agree with comment using `top: 50%` is not the preferred solution... — CrandellWS, Dec 05 '19 at 21:16

Vertical Alignment of SVG in CSS

1 Answers1