2016-11-03 12 views
0

、私は彼らが中心に

.secondRow{ 
 
\t margin-top: 25px; 
 
} 
 

 

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

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

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

 
} 
 

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

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

 
@media screen and (max-width: 768px) { 
 
    .aas { 
 
     float: left; 
 
    } 
 
}
<div class="row secondRow center-block"> 
 
\t \t \t <div class="col-xs-12 col-sm-4 col-lg-3"> 
 
\t \t \t \t <div class="information ac ib getPadding"> 
 
\t \t \t \t \t <span class="glyphicon glyphicon-menu-hamburger iconBigger" aria-hidden="true"></span> 
 
\t \t \t \t \t <p class="letterSmall">ՏԵՂԵԿԱՏՎՈՒԹՅՈՒՆ</p> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="contactUs ac ib getPadding"> 
 
\t \t \t \t \t <span class="glyphicon glyphicon-envelope iconBigger" aria-hidden="true"></span> 
 
\t \t \t \t \t <p class="letterSmall">CONTACT US</p> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="col-xs-12 col-sm-2 col-sm-offset-0 col-lg-3 col-lg-offset-2"> 
 
\t \t \t \t <div class="logoHolder"> 
 
\t \t \t \t \t <img src="images/logo.png" alt=""> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="col-xs-12 col-sm-4 col-sm-offset-1 col-lg-3 col-lg-offset-1"> 
 
\t \t \t \t <div class="fr aas"> 
 
\t \t \t \t \t <div class="information ac ib getPadding"> 
 
\t \t \t \t \t \t <span class="glyphicon glyphicon-menu-hamburger iconBigger" aria-hidden="true"></span> 
 
\t \t \t \t \t \t <p class="letterSmall">ՏԵՂԵԿԱՏՎՈՒԹՅՈՒՆ</p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="contactUs ac ib getPadding"> 
 
\t \t \t \t \t \t <span class="glyphicon glyphicon-envelope iconBigger" aria-hidden="true"></span> 
 
\t \t \t \t \t \t <p class="letterSmall">CONTACT US</p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div>

ガイズする必要がCOL-XS-12モードを取得する場合、私を助けてください。すでにxs-12モードになっているときは、すべてが左に浮かんでいますが、すべてがxs-12モードで中央にある必要があります。どうやってセンターにいるのですか?私は彼らをさまざまな方法で中心化しようとしましたが、残念ながら私はできませんでした。

答えて

0

センターに置く必要がある要素にmargin:0 autodisplay:tableを追加します。これはあなたが望むソリューションだと思います。

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

 

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

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

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

 
} 
 

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

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

 
@media screen and (max-width: 768px) { 
 
    .aas { 
 
     float: left; 
 
<div class="row secondRow center-block"> 
 
\t \t \t <div class="col-xs-12 col-sm-4 col-lg-3"> 
 
\t \t \t \t <div class="information ac ib getPadding"> 
 
\t \t \t \t \t <span class="glyphicon glyphicon-menu-hamburger iconBigger" aria-hidden="true"></span> 
 
\t \t \t \t \t <p class="letterSmall">ՏԵՂԵԿԱՏՎՈՒԹՅՈՒՆ</p> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="contactUs ac ib getPadding"> 
 
\t \t \t \t \t <span class="glyphicon glyphicon-envelope iconBigger" aria-hidden="true"></span> 
 
\t \t \t \t \t <p class="letterSmall">CONTACT US</p> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="col-xs-12 col-sm-2 col-sm-offset-0 col-lg-3 col-lg-offset-2"> 
 
\t \t \t \t <div class="logoHolder"> 
 
\t \t \t \t \t <img src="images/logo.png" alt=""> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="col-xs-12 col-sm-4 col-sm-offset-1 col-lg-3 col-lg-offset-1"> 
 
\t \t \t \t <div class="fr aas"> 
 
\t \t \t \t \t <div class="information ac ib getPadding"> 
 
\t \t \t \t \t \t <span class="glyphicon glyphicon-menu-hamburger iconBigger" aria-hidden="true"></span> 
 
\t \t \t \t \t \t <p class="letterSmall">ՏԵՂԵԿԱՏՎՈՒԹՅՈՒՆ</p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="contactUs ac ib getPadding"> 
 
\t \t \t \t \t \t <span class="glyphicon glyphicon-envelope iconBigger" aria-hidden="true"></span> 
 
\t \t \t \t \t \t <p class="letterSmall">CONTACT US</p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div>