How to center align a span followed by a div in a div

Question

I have the following code and I want to center align span and div inside parent div. How can i achieve it? If I give left and absolute position, on tablets the alignment changes and need to go for media query. Without that, is there any way I can fix it?

<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>

if I understood you, you need `text-align: center` for first `div` — Igor Ivancha, Jan 14 '16 at 08:59

Sowmya · Accepted Answer · 2016-01-14T09:14:36.547

0

Use text-align: center

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

Demo updated

To get child span and div in single line

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

Demo 2

edited Jan 14 '16 at 09:14

answered Jan 14 '16 at 08:59

Sowmya

26,684
21
96
136

I need the child elements to be inline - next to each other! – Smitha Jan 14 '16 at 09:08
@Smitha make the 2nd level child div `disply:inline` . Edited the answer. r u expecting to combine both the lines and show in single line? – Sowmya Jan 14 '16 at 09:12
yes, my span is backgrund image followed by the div - toggele button. I want them in single line centered. – Smitha Jan 14 '16 at 09:13
thanks, thats fine. but, I had float:left on span which I removed and due to that the second div is coming down. how to fix that ? – Smitha Jan 14 '16 at 09:48
If you have no other css for span tag, then it should work fine with the 2nd example given. – Sowmya Jan 14 '16 at 09:52

score 0 · Answer 2 · answered Jan 14 '16 at 09:12

You want this ?

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>

How to center align a span followed by a div in a div

2 Answers2