Как центрировать выравнивание диапазона, за которым следует div в div

У меня есть следующий код, и я хочу выравнивать по центру и div внутри родительского div. Как я могу это достичь? Если я дам левую и абсолютную позицию, на планшетах выравнивание меняется и нужно искать медиа-запрос. Без этого я могу это исправить?Как центрировать выравнивание диапазона, за которым следует 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>

источник

2016-01-14 Smitha

, если я вас понял, что вам нужно 'выравнивания текста: center' для первого' div' –

Использование text-align: center

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

Demo updated

Чтобы получить срок ребенка и DIV в одной строке

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

Demo 2

источник

2016-01-14 08:59:10 Sowmya

мне нужны дочерние элементы, чтобы быть инлайн - рядом друг с другом! – Smitha

@Smitha сделать ребенка второго уровня div 'disply: inline'. Отредактировал ответ. Вы ожидаете объединить обе линии и показать в одной строке? – Sowmya

Да, мой охват - обратное изображение, за которым следует кнопка div-toggele. Я хочу, чтобы они были в одной линии по центру. – Smitha

Вы хотите этого?

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-14 09:12:36

Как центрировать выравнивание диапазона, за которым следует div в div

ответ

Смежные вопросы