jquery-mobile - JQM フリップ スイッチのレンダリングの問題

Question

ASP.Net MVC 4 モバイル Web アプリケーションのビューの 1 つで JQM フリップ スイッチを使用しています。フリップ スイッチを右いっぱいに動かすと、レンダリング時に不要な垂直線が表示されます。以下のスクリーンショットを参照してください。

コードは次のとおりです。

    <li data-role="fieldcontain">
        @Html.Label("AutoLogin", New With {.style = "text-align:center;font-weight:bold"})
       <div class="center-wrapper">
        <select name="AutoLogin" id="AutoLogin" data-role="slider" data-mini="true">
          <option value ="false">Off</option>
          <option value ="true">On</option>
        </select>
        </div>
    </li>

なぜこれが起こっているのですか、どうすればそれを防ぐことができますか?

センターラッパークラス:

 .center-wrapper{
 text-align: center;
 }
.center-wrapper * {
 margin: 0 auto;
 }

編集：

このレンダリングの問題は、フリップ スイッチを中央に配置したことが原因ではなく、単にリスト アイテム内にフリップ スイッチを配置したことが原因であることがわかりました。フリップ スイッチを最も単純な形式 (以下を参照) に減らしても、フリップ スイッチがリスト アイテム内にある場合はレンダリングの問題が発生します。これを簡単に再現できるはずです。

<label for="flip-1">Flip switch:</label>
<select name="flip-1" id="flip-1" data-role="slider">
  <option value="off">Off</option>
  <option value="on">On</option>
</select>