0

次のコードがあり、親 div 内のスパンと div を中央揃えにしたいと考えています。どうすれば達成できますか？左と絶対位置を指定すると、タブレットでは配置が変更され、メディアクエリを実行する必要があります。それがなければ、それを修正できる方法はありますか？

<div>
    <span  data-toggle="toggle">
        <input class="button" data-on="On" data-off="Off" type="checkbox">
        <div class="toggle-group">
            <label class="btn btn-primary toggle-on">
                On
            </label>
            <label class="btn btn-default toggle-off active">
                Off
            </label>
            <span class="toggle-handle btn btn-default"></span>
        </div>
    </div>
</div>

4

2 に答える 2

0

使用するtext-align: center

.wrapper > span{display:block; text-align:center}
.wrapper > div{text-align:center}
.wrapper > div > div{display: inline-block}

デモが更新されました

子スパンと div を 1 行で取得するには

.wrapper{text-align:center}
.wrapper div{display:inline-block}

デモ 2

于 2016-01-14T08:59:10.847 に答える
0

あなたはこれを求めている ？

div.btn-default {
  text-align: center;
}
div.toggle-group {
  display: inline-block;
}
<div> <span class="band-charging-icon charge-not-created" title="Nothing created/set (reservation not checked in)" ng-class="{'charge-not-created':!guest.chargingAccoundId || !guest.chargeAccountAvailable, 'charge-pin-set':guest.chargingAccoundId &amp;&amp; guest.chargeAccountAvailable  &amp;&amp; guest.pinAvailable, 'charge-pin-not-set':guest.chargingAccoundId &amp;&amp; guest.chargeAccountAvailable &amp;&amp; !guest.pinAvailable}"></span> 
  <div class="toggle btn btn-default off disabled" title="Charging Privileges Off" ng-click="guest.chargingAccoundId &amp;&amp; guest.chargeAccountAvailable &amp;&amp; toggler()(guest)" ng-class="{'btn-default off disabled': !guest.chargeAccountAvailable || !guest.chargingAccoundId, 'btn-default off': (guest.chargingAccoundId &amp;&amp; guest.chargeAccountAvailable &amp;&amp; !guest.chargingPrivileges), 'btn-primary': (guest.chargingAccoundId &amp;&amp; guest.chargeAccountAvailable &amp;&amp; guest.chargingPrivileges)}"
  data-toggle="toggle">
    <input class="magic-band-charge-toggle-button" data-on="On" data-off="Off" type="checkbox">
    <div class="toggle-group">
      <label class="btn btn-primary toggle-on" ng-class="{'active': guest.chargingPrivileges}">On</label>
      <label class="btn btn-default toggle-off active" ng-class="{'active': !guest.chargingPrivileges}">Off</label><span class="toggle-handle btn btn-default"></span> 
    </div>
  </div>
</div>

于 2016-01-14T09:12:36.887 に答える