title: Center text in Highcharts' bubble chart's data labels
body: <p>I am working with Angular 2 and <a href="https://github.com/Bigous/ng2-highcharts" rel="nofollow noreferrer">ng2-highcharts</a> library.</p>
  
  <p>This is what I have: <a href="http://jsfiddle.net/jzawgwef/3/" rel="nofollow noreferrer">http://jsfiddle.net/jzawgwef/3/</a></p>
  
  <p><strong>I want to center the text inside the bubble.</strong></p>
  
  <p>I have tried to add style inside <code>dataLabel</code> attribute:</p>
  
  <pre class="lang-js prettyprint-override"><code>dataLabels: {
    enabled: true,
    style: {
      width: '150px',
      'text-align': 'center' // this does not work
    },
    format: '{point.name}'
  }
  </code></pre>
  
  <p>I have noticed that the generated output has the style rule <code>text-align: center</code> but is positioned using two attributes (<code>x</code> and <code>y</code>):</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;g class="highcharts-data-labels highcharts-series-0 highcharts-bubble-series highcharts-color-0 highcharts-tracker"
      transform="translate(64,46) scale(1 1)"
      opacity="1"&gt;
    &lt;g class="highcharts-label highcharts-data-label highcharts-data-label-color-0 "
        style="text-align:center;"
        transform="translate(185,141)"&gt;
      &lt;text x="5"
          y="16"
          style="font-size:11px;font-weight:bold;color:#000000;text-outline:1px contrast;fill:#000000;"&gt;
        &lt;tspan x="5" y="16" class="highcharts-text-outline"
            fill="#FFFFFF" stroke="#FFFFFF"
            stroke-width="2px" stroke-linejoin="round"&gt;
            Very long data label text I
        &lt;/tspan&gt;
        &lt;tspan dy="14" x="5" class="highcharts-text-outline"
            fill="#FFFFFF" stroke="#FFFFFF"
            stroke-width="2px" stroke-linejoin="round"&gt;
            want to center
        &lt;/tspan&gt;
        &lt;tspan x="5" y="16"&gt;
          Very long data label text I
        &lt;/tspan&gt;
        &lt;tspan dy="14" x="5"&gt; &lt;!-- This x changes the span position --&gt;
          want to center
        &lt;/tspan&gt;
        &lt;title&gt;Very long data label text I want to center&lt;/title&gt;
      &lt;/text&gt;
    &lt;/g&gt;
  &lt;/g&gt;
  </code></pre>
  
  <p>There is a way to do it?</p>
  
  <p>Thanks</p>