中心引導柱裏面的內容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

回答

相關問題