2014-10-30 46 views
0

我希望能够将包含以下文本的div放在页面中间。我虽然我将能够使用“中心块”级的引导,但它似乎并没有工作:Bootstrap - 如何将包含文本的div放在中间?

实时预览: http://codepen.io/anon/pen/tCIlG

Code below: 

<div class="row"> 
     <div class="col-md-4 center-block text-center"> 

     I want to center the div that this text is in.I want to center the div that this text is in.I want to center the div that this text is in.I want to center the div that this text is in.I want to center the div that this text is in.I want to center the div that this text is in.I want to center the div that this text is in.I want to center the div that this text is in.I want to center the div that this text is in.I want to center the div that this text is in. 

     </div> 
    </div> 
+0

可能重复[如何在div中水平居中div?](http://stackoverflow.com/questions/114543/how-to-horizo​​ntally-center-a-div-in-a-div) – Sasa 2014-10-30 22:37:13

回答

2

.col-md-4类使其漂浮而不是中心。如果你想保持宽度从类,你可以在CSS重写它:

.col-md-4.center-block { 
    float: none; 
} 

更新codepen:http://codepen.io/sdsanders/pen/lHrvu

+0

谢谢你,那很容易。是使用列方法实现我想要做的最好的方法?还是有更好的方式来做到这一点,不需要添加在单独的CSS等? – ifusion 2014-10-30 22:40:32

+1

@ifusion上面的答案是另一个不需要编写任何CSS的选项。 – 2014-10-30 22:43:33

+0

你可能想避免黑客引导网格,只是抵消它如下 – 2014-10-31 22:52:13

2

在这里你去

<div class="row"> 
 
     <div class="col-md-4 col-md-offset-4"> 
 

 
     I want to center the div that this text is in.I want to center the div that this text is in.I want to center the div that this text is in.I want to center the div that this text is in.I want to center the div that this text is in.I want to center the div that this text is in.I want to center the div that this text is in.I want to center the div that this text is in.I want to center the div that this text is in.I want to center the div that this text is in. 
 

 
     </div> 
 
    </div>

+0

真棒,谢谢马特! – ifusion 2014-10-30 22:44:35

+0

@ifusion没有问题,随意标记为接受的问题 – 2014-10-31 22:51:05