2016-11-03 2 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>

얘들 아에로 그들이 필요, 저를 도와주세요. 그것이 이미 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>