title: How to center SVG text vertically in IE9
body: <p>In order to align text vertically in SVG one has to use the <code>dominant-baseline</code> attribute.
  This has already been discussed on SO (<a href="https://stackoverflow.com/questions/56402/aligning-text-in-svg">Aligning text in SVG</a>) and is part of <a href="http://www.w3.org/TR/SVG/text.html#BaselineAlignmentProperties" rel="nofollow noreferrer">the specification</a>.</p>
  
  <p>My problem is with IE9 which apparently <a href="http://msdn.microsoft.com/en-us/library/gg558060%28v=vs.85%29.aspx" rel="nofollow noreferrer">does not support <code>dominant-baseline</code></a> and a bunch of <a href="http://msdn.microsoft.com/en-us/library/ff934774%28v=VS.85%29.aspx" rel="nofollow noreferrer">other things</a>.</p>
  
  <p>Do you have any ideas on how to approximate <code>dominant-baseline: central</code> in IE9?</p>
  
  <p>Here is a sample that works in FF and Chrome. It does not work in IE9, Opera 11. Safari on Windows doesn't support <code>central</code>, but supports <code>middle</code> which is still good.</p>
  
  <pre><code>&lt;?xml version="1.0"?&gt;
  &lt;svg width="300" height="300" xmlns="http://www.w3.org/2000/svg"&gt;
      &lt;path d="M 10 100 h 290" stroke="blue" stroke-width=".5" /&gt;
      &lt;text x="40" y="100" font-size="16" style="dominant-baseline: auto;"&gt;
          XXX dominant-baseline: auto; XXX
      &lt;/text&gt;
  
      &lt;path d="M 10 200 h 290" stroke="blue" stroke-width=".5" /&gt;
      &lt;text x="40" y="200" font-family="sans-serif" font-size="15" style="dominant-baseline: central;"&gt;
          XXX dominant-baseline: central XXX
      &lt;/text&gt;
  &lt;/svg&gt;
  </code></pre>