จัดกึ่งกลางเนื้อหาภายในคอลัมน์ใน Bootstrap 4

Question 1

ฉันต้องการความช่วยเหลือในการแก้ไขปัญหาฉันต้องการจัดกึ่งกลางเนื้อหาภายในคอลัมน์ใน bootstrap4 โปรดค้นหารหัสของฉันด้านล่าง

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

Question 2

มีวิธีการจัดกึ่งกลางแนวนอนหลายวิธีใน Bootstrap 4 ...

text-centerสำหรับdisplay:inlineองค์ประกอบตรงกลาง
offset-*หรือmx-autoสามารถใช้กับคอลัมน์กลาง ( col-*)
หรือjustify-content-centerบนคอลัมน์rowถึงกึ่งกลาง ( col-*)
mx-autoสำหรับdisplay:blockองค์ประกอบที่อยู่ตรงกลางภายในd-flex

mx-auto(ระยะขอบแกน x อัตโนมัติ) จะจัดกึ่งกลางdisplay:blockหรือdisplay:flexองค์ประกอบที่มีความกว้างที่กำหนดไว้ (%, vw, px ฯลฯ .. ) Flexbox ถูกใช้โดยค่าเริ่มต้นในคอลัมน์กริดดังนั้นจึงมีวิธีการตั้งศูนย์ Flexbox ที่หลากหลาย

การสาธิตวิธีการจัดกึ่งกลาง Bootstrap 4

ในกรณีของคุณให้ใช้mx-autoเพื่อจัดกึ่งกลางcol-3และจัดtext-centerกึ่งกลางเนื้อหา ..

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

https://codeply.com/go/GRUfnxl3Ol

หรือใช้justify-content-centerกับองค์ประกอบ flexbox (.row):

<div class="container">
    <div class="row justify-content-center">
        <div class="col-3 text-center">
            center
        </div>
    </div>
</div>

ดูเพิ่มเติมที่:
Vertical Align Center ใน Bootstrap 4

Question 3

<div class="container">
    <div class="row">
        <div class="col d-flex justify-content-center">
             CenterContent
        </div>
    </div>
</div>

ขยายข้อมูลโค้ด

เปิดใช้งาน 'flex' สำหรับคอลัมน์ตามที่เราต้องการและใช้ justify-content-center

Question 4

เพิ่มชั้นเรียนtext-centerในคอลัมน์ของคุณ:

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

Question 5

<div class="container">
    <div class="row justify-content-center">
        <div class="col-3 text-center">
            Center text goes here
        </div>
    </div>
</div>

ฉันได้ใช้justify-content-centerระดับแทนmx-autoเช่นเดียวกับในคำตอบนี้

ตรวจสอบที่https://jsfiddle.net/sarfarazk/4fsp4ywh/

Question 6

.row>.col, .row>[class^=col-] {
    padding-top: .75rem;
    padding-bottom: .75rem;
    background-color: rgba(86,61,124,.15);
    border: 1px solid rgba(86,61,124,.2);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col col-lg-2">
      1 of 2
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

ขยายข้อมูลโค้ด

Question 7

2020: ปัญหาที่คล้ายกัน

หากเนื้อหาของคุณเป็นชุดปุ่มที่คุณต้องการจัดกึ่งกลางของหน้าให้รวมไว้ในแถวและใช้justify-content-center

โค้ดตัวอย่างด้านล่าง:

<div class="row justify-content-center">

    <button>Action A</button>
    <button>Action B</button>
    <button>Action C</button> 

</div>