html - 当使用col-xs-12模式时，我需要它们位于中央

This question already has answers here:

Center a column using Twitter Bootstrap 3
                                
                                    （33个答案）
                                
                        
                                3年前关闭。
            
                    

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

伙计们，请帮帮我。当它已经处于xs-12模式下时，所有内容都会向左浮动，但是我需要它们全部处于xs-12模式下并且位于中间。我如何让他们成为中心人物？我试图用不同的方法使它们居中，但不幸的是我做不到。

最佳答案

将margin:0 auto和display:table添加到您必须位于中心的元素中。我认为这是您想要的解决方案。

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