How to position x axis ticker labels, between tickers in Highcharts.js

Question

This is my xAxis chart options in the chart

xAxis: {
    type: 'datetime',
    startOnTick: true,
    labels: {
      useHTML: true,
      align: 'center',
      rotation: 0,
      style: { fontSize: "10px" },
      formatter: function () {
        var date = new Date(this.value);
        var quarter = Math.floor((date.getUTCMonth()) / 3) + 1;
        var year = date.getUTCFullYear().toString().substr(-2);
        return 'Q' + quarter + '-' + year;
      }
    },
    minPadding: 0.05, 
    maxPadding: 0.05
  },

my x axis looks like this

how to display these ticker labels in between tick marks, rather than right under the tick marks. Thaks in advance.