When getting col-xs-12 mode I need them to be in the center

Question

.secondRow{
 margin-top: 25px;
}

.iconBigger{
 font-size: 26px;
 color: grey;
}

.letterSmall{
 font-size: 10px;
 padding-top: 5px;
}

.getPadding{
 padding-left: 10px;
 cursor: pointer;

}

.getPadding:hover{
 color: #E71D35;
 transition-duration: 250ms;
}

.getPadding:hover .iconBigger{
 color: #E71D35;
 transition-duration: 250ms;
}

@media screen and (max-width: 768px) {
    .aas {
        float: left;
    }
}

<div class="row secondRow center-block">
    <div class="col-xs-12 col-sm-4 col-lg-3">
     <div class="information ac ib getPadding">
      <span class="glyphicon glyphicon-menu-hamburger iconBigger" aria-hidden="true" />
   <p class="letterSmall">ՏԵՂԵԿԱՏՎՈՒԹՅՈՒՆ</p>
  </div>
  <div class="contactUs ac ib getPadding">
      <span class="glyphicon glyphicon-envelope iconBigger" aria-hidden="true" />
   <p class="letterSmall">CONTACT US</p>
  </div>
 </div>
 <div class="col-xs-12 col-sm-2 col-sm-offset-0 col-lg-3 col-lg-offset-2">
     <div class="logoHolder"><img src="images/logo.png" alt=""></div>
 </div>
 <div class="col-xs-12 col-sm-4 col-sm-offset-1 col-lg-3 col-lg-offset-1">
     <div class="fr aas">
      <div class="information ac ib getPadding">
       <span class="glyphicon glyphicon-menu-hamburger iconBigger" aria-hidden="true" />
    <p class="letterSmall">ՏԵՂԵԿԱՏՎՈՒԹՅՈՒՆ</p>
   </div>
   <div class="contactUs ac ib getPadding">
    <span class="glyphicon glyphicon-envelope iconBigger" aria-hidden="true" />
    <p class="letterSmall">CONTACT US</p>
   </div>
  </div>
 </div>
</div>

Guys, please help me. When it is already in xs-12 mode, everything floats to left, but I need them to be all in xs-12 mode and in the center. How can I get them to be in center? I have tried to get them to center by different ways, but unfortunately i couldn`t.

score 0 · Answer 1 · answered Nov 03 '16 at 08:27

Add margin:0 auto and display:table to the element which you have to be in center.I think this is the solution you want.

.secondRow{
  margin:0 auto;
  display:table;
}


.iconBigger{
 font-size: 26px;
 color: grey;
}

.letterSmall{
 font-size: 10px;
 padding-top: 5px;
}

.getPadding{
 padding-left: 10px;
 cursor: pointer;

}

.getPadding:hover{
 color: #E71D35;
 transition-duration: 250ms;
}

.getPadding:hover .iconBigger{
 color: #E71D35;
 transition-duration: 250ms;
}

@media screen and (max-width: 768px) {
    .aas {
        float: left;

<div class="row secondRow center-block">
   <div class="col-xs-12 col-sm-4 col-lg-3">
    <div class="information ac ib getPadding">
     <span class="glyphicon glyphicon-menu-hamburger iconBigger" aria-hidden="true"></span>
     <p class="letterSmall">ՏԵՂԵԿԱՏՎՈՒԹՅՈՒՆ</p>
    </div>
    <div class="contactUs ac ib getPadding">
     <span class="glyphicon glyphicon-envelope iconBigger" aria-hidden="true"></span>
     <p class="letterSmall">CONTACT US</p>
    </div>
   </div>
   <div class="col-xs-12 col-sm-2 col-sm-offset-0 col-lg-3 col-lg-offset-2">
    <div class="logoHolder">
     <img src="images/logo.png" alt="">
    </div>
   </div>
   <div class="col-xs-12 col-sm-4 col-sm-offset-1 col-lg-3 col-lg-offset-1">
    <div class="fr aas">
     <div class="information ac ib getPadding">
      <span class="glyphicon glyphicon-menu-hamburger iconBigger" aria-hidden="true"></span>
      <p class="letterSmall">ՏԵՂԵԿԱՏՎՈՒԹՅՈՒՆ</p>
     </div>
     <div class="contactUs ac ib getPadding">
      <span class="glyphicon glyphicon-envelope iconBigger" aria-hidden="true"></span>
      <p class="letterSmall">CONTACT US</p>
     </div>
    </div>
   </div>
  </div>

When getting col-xs-12 mode I need them to be in the center

1 Answers1