jQuery ui Datepicker 年月プルダウンにした時の調整

Datepicker は jQuery ui 以外にも沢山あるのでまだ、jQuery ui を使うなんてという批判はさておき、
使い慣れてもいるので。。。
年月セレクタをプルダウンにした時、、
jquery-ui-1.12.1.min.js
と、

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>

で、以下のようにdatepicker を設定して表示した時、、、

$.datepicker.setDefaults($.datepicker.regional["ja"]);
$("#datepicker").datepicker({
   prevText:"前月", nextText:"翌月",
   changeMonth: true,
   changeYear: true, yearRange: '-5:+4',
   firstDay: 1,
});

このままだと以下のように、年と月のプルダウンの僅かに配置がずれてしまいます。
f:id:posturan:20181030215730j:plain

このちょっとのズレをなくす方法が昔はわかりませんでした。
でも、近年のCSSは、flex-box があります。
ui-datepicker-title クラスに、display: flex を指定して 
justify-content : center もしくは、space-around などを指定します。

.ui-datepicker-title{
   display: flex;
   justify-content: center;
   -webkit-justify-content: center;
}
.ui-datepicker select.ui-datepicker-year{
    margin-right: 0.1rem;
    width: auto;
}
.ui-datepicker select.ui-datepicker-month{
    margin-left: 0.3rem;
    width: auto;
}
.ui-datepicker{
	font-size: 80%;
}

これで、無事、年月プルダウンが揃って配置されます。
f:id:posturan:20181030220455j:plain

justify-content: center; を justify-content: space-around; にした場合は、、、
f:id:posturan:20181030220548j:plain

となります。個人的には、center の方が好みです。