中心引导柱里面的内容4

我需要帮助解决的问题，我需要到中心在bootstrap4栏里面的内容，请在下面找到中心引导柱里面的内容4

<div class="container"> 
    <div class="row justify-content-center"> 
     <div class="col-3"> 
     <div class="nauk-info-connections"> 
     </div> 
    </div> 
</div>

来源

2017-03-01 Praveen Kumar

使用可以使用'class =“text-center”'。 –

我尝试过使用它，但它不适用于Bootstrap4，文本本身已经居中，但我需要类“nauk-info-connections”本身的div来居中对齐col-3 div内部。 –

我使用传统的方法对容器进行对中 .nauk-info-connections {0} {0} {0} border-radius：50％; \t border：1px solid $ nauk-orange; \t height：100px; \t width：100px; \t margin：0 auto; } –

-2

我的代码添加任何偏移种类从偏移-1到偏移-11，这使它成为中心。

<div class="col-3 offset-5"> 

    <div class="nauk-info-connections text-center" style="border: 1px red solid"> 
    Text here2 
    <span>span text </span> 
</div>

请使用自举4.在我所用的“偏移-5”小提琴检查出fiddle，所以它已经放置中心。

来源

2017-03-01 10:18:50

我不相信这是真的。 Bootstrap 4消除了偏移类。 –

中有引导程序4多个水平定心方法...

text-center为中心display:inline元件

mx-auto用于定心display:block元件

offset-*或mx-auto可用于中心格col-*

justify-content-center to center col-*内部row

mx-auto（自动x轴边距）将围绕display:block或display:flex元件具有限定的宽度，（％，VW，像素，等。）。 Flexbox在网格列上默认使用，因此也有各种Flexbox居中方法。

Demo of the Bootstrap 4 Centering Methods

在你的情况下，使用mx-auto居中col-3和text-center居中它的内容..

<div class="row"> <div class="col-3 mx-auto"> <div class="nauk-info-connections text-center"> center </div> </div> </div>

http://www.codeply.com/go/GRUfnxl3Ol

另见：
Vertical Align Center in Bootstrap 4

来源

2017-03-02 15:13:37 ZimSystem

开线程应将此标记为可接受的解决方案 – SchweizerSchoggi

将text-center添加到列中：

<div class="col text-center"> 
I am centered 
</div>

来源

2017-11-20 15:13:50 zhekaus

中心引导柱里面的内容4

回答

相关问题