1146

ฉันจะกำหนดขนาดของคอลัมน์หนึ่งคอลัมน์ไว้ในคอนเทนเนอร์ (12 คอลัมน์) ในTwitter Bootstrap 3 ได้อย่างไร

.centered {
  background-color: red;
}

<body class="container">
  <div class="col-lg-1 col-offset-6 centered">
    <img data-src="holder.js/100x100" alt="" />
  </div>
</body>

ขยายตัวอย่างข้อมูล

ฉันต้องการ a divโดยมีคลาส.centeredให้อยู่กึ่งกลางภายในคอนเทนเนอร์ ฉันอาจใช้แถวถ้ามีหลายdivs แต่ตอนนี้ฉันต้องการ a ที่divมีขนาดหนึ่งคอลัมน์ที่อยู่กึ่งกลางภายในคอนเทนเนอร์ (12 คอลัมน์)

ฉันยังไม่แน่ใจว่าวิธีการข้างต้นดีพอเนื่องจากความตั้งใจที่จะไม่ชดเชยdivครึ่ง ฉันไม่ต้องการพื้นที่ว่างด้านนอกdivและเนื้อหาของdivสัดส่วนที่ลดลง ฉันต้องการพื้นที่ว่างด้านนอก div เพื่อกระจายอย่างเท่าเทียมกัน (ลดขนาดจนถึงความกว้างคอนเทนเนอร์เท่ากับหนึ่งคอลัมน์)

— BSR
แหล่งที่มา

1963

มีสองวิธีในการจัดคอลัมน์<div>ใน Bootstrap 3:

วิธีที่ 1 (ออฟเซ็ต):

วิธีแรกใช้คลาสออฟเซ็ตของ Bootstrap ดังนั้นจึงไม่จำเป็นต้องเปลี่ยนมาร์กอัพและไม่มี CSS พิเศษ ที่สำคัญคือการตั้งค่าชดเชยเท่ากับครึ่งหนึ่งของขนาดที่เหลือของแถว ดังนั้นสำหรับตัวอย่างเช่นคอลัมน์ขนาด 2 จะเป็นศูนย์กลางโดยการเพิ่มการชดเชยจาก 5, (12-2)/2ว่า

ในมาร์กอัพสิ่งนี้จะมีลักษณะดังนี้:

<div class="row">
    <div class="col-md-2 col-md-offset-5"></div>
</div>

ตอนนี้มีข้อเสียเปรียบที่ชัดเจนสำหรับวิธีนี้ มันทำงานเฉพาะสำหรับขนาดคอลัมน์แม้ดังนั้นเพียง.col-X-2, .col-X-4, col-X-6, col-X-8และcol-X-10ได้รับการสนับสนุน

วิธีที่ 2 (เก่า`margin:auto`)

คุณสามารถจัดกึ่งกลางคอลัมน์ขนาดใดก็ได้โดยใช้margin: 0 auto;เทคนิคที่พิสูจน์แล้ว คุณเพียงแค่ต้องดูแลการลอยที่เพิ่มโดยระบบกริดของ Bootstrap ฉันขอแนะนำให้กำหนดคลาส CSS ที่กำหนดเองดังนี้:

.col-centered{
    float: none;
    margin: 0 auto;
}

ตอนนี้คุณสามารถเพิ่มลงในขนาดคอลัมน์ได้ทุกขนาดหน้าจอและมันจะทำงานได้อย่างราบรื่นด้วยเค้าโครงตอบสนองของ Bootstrap:

<div class="row">
    <div class="col-lg-1 col-centered"></div>
</div>

หมายเหตุ:ด้วยเทคนิคทั้งสองคุณสามารถข้าม.rowองค์ประกอบและให้คอลัมน์อยู่กึ่งกลางภายใน.containerแต่คุณจะสังเกตเห็นความแตกต่างเล็กน้อยในขนาดคอลัมน์จริงเนื่องจากการขยายภายในชั้นคอนเทนเนอร์

ปรับปรุง:

ตั้งแต่ v3.0.1 Bootstrap มีคลาสในตัวcenter-blockที่ใช้margin: 0 autoแต่ขาดหายไปfloat:noneคุณสามารถเพิ่มมันเข้ากับ CSS ของคุณเพื่อให้มันทำงานกับระบบกริดได้

— koala_dev
แหล่งที่มา

1

ฉันคิดว่าไม่มีการลอย: ไม่มีในกฎศูนย์บล็อกเพราะมีกฎอิสระ clearfix ที่คุณสามารถเพิ่มองค์ประกอบสำหรับการล้างลอย

— Diego Fernando Murillo Valenci

7

@DiegoFernandoMurilloValenci .clearfixจะไม่ทำงานในกรณีนี้เพราะมันไม่ได้ลบคุณสมบัติลอยบนองค์ประกอบ (ที่จำเป็นในการใช้ศูนย์margin: 0 auto) มันก็ทำให้ภาชนะห่อองค์ประกอบลอยใด ๆ ภายใน

— koala_dev

4

ไม่สามารถใช้สิ่งนี้ในคอลัมน์เนื่องจากไม่มีfloat:none;

— airtonix

2

หากคุณต้องการจัดกึ่งกลางให้มากขึ้นหนึ่งคอลัมน์ในหนึ่งบรรทัดให้ดูคำตอบนี้stackoverflow.com/questions/28683329/…

— Conor Svensson

3

ไวยากรณ์ของออฟเซ็ตเปลี่ยนแปลงใน Bootstrap4 (เหมือนเวอร์ชันล่าสุด) การใช้การตอบกลับนี้เป็นตัวอย่าง: คลาส col-md-offset-5 ควรเป็น offset-md-5

— lgants

296

วิธีการที่ต้องการของกลางคอลัมน์คือการใช้ "ชดเชย" (เช่น: col-md-offset-3)

Bootstrap 3.x อยู่ตรงกลางตัวอย่าง

สำหรับตรงกลางองค์ประกอบมีระดับผู้ช่วยcenter-block

คุณยังสามารถใช้text-centerเพื่อจัดกึ่งกลางข้อความ (และองค์ประกอบอินไลน์)

ตัวอย่าง : http://bootply.com/91632

แก้ไข - เป็นที่กล่าวถึงในความคิดเห็นที่center-blockทำงานบนคอลัมน์เนื้อหาและdisplay:blockองค์ประกอบ แต่จะไม่ทำงานในคอลัมน์ของตัวเอง (col-*divs) floatเพราะการใช้เงินทุน

อัปเดต 2018

ขณะนี้มีเงินทุน 4ที่อยู่ตรงกลางวิธีการที่มีการเปลี่ยนแปลง ..

text-centerยังคงใช้สำหรับdisplay:inlineองค์ประกอบ
mx-autoแทนที่องค์ประกอบcenter-blockกลางdisplay:block
offset-* หรือ mx-autoสามารถใช้กับคอลัมน์กริดกลาง

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

ตัวอย่าง Bootstrap 4 แนวนอนตรงกลาง

สำหรับการตั้งกึ่งกลางแนวตั้งใน BS4 ดู https://stackoverflow.com/a/41464397/171456

— ซิม
แหล่งที่มา

31

น่าเสียดายที่คลาสตัวช่วยนี้ไม่ทำงานกับระบบคอลัมน์เนื่องจากไม่ได้ดูแลคุณสมบัติลอย ดูการสาธิตนี้ตัวอย่างเช่น

— koala_dev

13

สิ่งนั้นต้องการเพียงบล็อกกลาง {ลอย: ไม่มี; } และมันใช้งานได้ bootply.com/122268

— Matias Vad

5

ไม่แน่ใจเกี่ยวกับ OP แต่ฉันมาที่นี่เพื่อtext-centerดูรายละเอียด - ไม่มีคำตอบอื่นใดให้ อันนี้ได้รับการโหวตของฉัน

— domoarigato

1

ไม่สามารถใช้สิ่งนี้ในคอลัมน์เนื่องจากไม่มีfloat:none;

— airtonix

98

ตอนนี้ Bootstrap 3.1.1 ทำงานด้วย.center-blockและคลาสตัวช่วยนี้ทำงานกับระบบคอลัมน์

Bootstrap 3 ศูนย์ระดับผู้ช่วย

กรุณาตรวจสอบjsfiddle DEMO นี้ :

<div class="container">
    <div class="row">
        <div class="center-block">row center-block</div>
    </div>
    <div class="row">
        <div class="col-md-6 brd">
            <div class="center-block">1 center-block</div>
        </div>
        <div class="col-md-6 brd">
            <div class="center-block">2 center-block</div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xs-2 col-center-block">row col-xs-2 col-center-block</div>
</div>

ศูนย์ช่วยเหลือผู้เรียน

ศูนย์คอลัมน์แถวโดยใช้col-center-blockคลาสตัวช่วย

.col-center-block {
    float: none;
    display: block;
    margin: 0 auto;
    /* margin-left: auto; margin-right: auto; */
}

— ผู้ส่ง
แหล่งที่มา

ฉันได้งานนี้โดยไม่เพิ่มfloat:noneโดยทำให้แน่ใจว่า div center-block มีstyle="width : ?px"สไตล์ที่ใช้กับมัน ตัวอย่างเช่นความกว้างของภาพ ทำงานร่วมกับ 3.2.2

— Piotr Kula

กำไรขั้นต้น: 0 อัตโนมัติ - แทน margin-left + margin-right แทน

— mmike

57

เพียงเพิ่มสิ่งต่อไปนี้ในไฟล์ CSS ที่กำหนดเองของคุณ แก้ไขไฟล์ CSS เงินทุนโดยตรงไม่แนะนำและยกเลิกการความสามารถในการใช้CDN

.center-block {
    float: none !important
}

ทำไม?

Bootstrap CSS (รุ่น 3.7 และต่ำกว่า) ใช้ระยะขอบ: 0 อัตโนมัติ แต่มันถูกเขียนทับโดยคุณสมบัติ float ของคอนเทนเนอร์ขนาด

ป.ล. :

หลังจากที่คุณเพิ่มคลาสนี้อย่าลืมตั้งคลาสตามลำดับที่ถูกต้อง

<div class="col-md-6 center-block">Example</div>

— Sagive SEO
แหล่งที่มา

1

ฉันใช้ Bootstrap 3.3.7และนี่เป็นวิธีเดียวที่ใช้ได้ผลสำหรับฉัน!

— illagrenan

1

งานนี้ แต่อย่าคิดว่า!importantจำเป็น

— Gianfranco P.

1

@GianfrancoP P. สิทธิ์ของคุณ แต่ ... ขึ้นอยู่กับลำดับการโหลดและฉันต้องการให้วิธีที่เข้าใจผิดได้

— Sagive SEO

39

Bootstrap 3ตอนนี้มีคลาสในตัวสำหรับสิ่งนี้.center-block

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

หากคุณยังคงใช้ 2.X อยู่ให้เพิ่มไปยัง CSS ของคุณ

— Schmalzy
แหล่งที่มา

นี่อาจจะให้ผลที่ต้องการได้ง่ายที่สุด นอกจากนี้ยังโยนความกว้างของคลาส. center หรือเพิ่มคลาสที่สองหากคุณกำลังมองหาวิธีการแบบแยกส่วนมากขึ้น

— Matt Lambert

2

เพิ่มลอย: ไม่มี; เป็น. center ให้คุณย้ายคลาสขึ้นไปยังคอนเทนเนอร์ รักษาความสะอาดโค้ด

— Adam Patterson

7

ไม่สามารถใช้สิ่งนี้ในคอลัมน์เนื่องจากไม่มีfloat:none;

— airtonix

37

วิธีการของฉันในคอลัมน์กลางคือการใช้display: inline-blockสำหรับคอลัมน์และtext-align: centerสำหรับคอนเทนเนอร์หลัก

คุณเพียงแค่ต้องเพิ่มคลาส CSS row'ศูนย์กลางไป

HTML:

<div class="container-fluid">
  <div class="row centered">
    <div class="col-sm-4 col-md-4">
        Col 1
    </div>
    <div class="col-sm-4 col-md-4">
        Col 2
    </div>
    <div class="col-sm-4 col-md-4">
        Col 3
    </div>
  </div>
</div>

CSS:

.centered {
   text-align: center;
   font-size: 0;
}
.centered > div {
   float: none;
   display: inline-block;
   text-align: left;
   font-size: 13px;
}

JSFiddle: http://jsfiddle.net/steyffi/ug4fzcjd/

— สเตฟฟี
แหล่งที่มา

2

นี่เป็นคำตอบเดียวที่ใช้งานได้ 100% - คนอื่นใช้ได้ แต่ไม่ใช่เมื่อ bootstrap เปลี่ยนเป็นมุมมองอุปกรณ์เคลื่อนที่ (รายการถูกย้ายไปทางซ้าย)

— Levi Fuller

นี่เป็นเพียงคนเดียวที่ทำงานฉันได้เช่นกัน. center-block ใช้งานได้กับหนึ่งคอลัมน์เท่านั้นและฉันต้องการจัดคอลัมน์ทั้งหมดให้อยู่ตรงกลางโดยไม่ขึ้นกับว่ามีจำนวนเท่าใด

— cjohansson

ทางออกเดียวที่ใช้ได้สำหรับฉันด้วย คนอื่นทำงานเฉพาะเมื่อเบราว์เซอร์เป็นหน้าต่าง (ไม่ใช่แบบเต็มหน้าจอ)

— kiwicomb123

26

Bootstrapเวอร์ชัน 3 มีคลาส. text-center

เพียงเพิ่มคลาสนี้:

text-center

มันจะโหลดสไตล์นี้:

.text-center {
    text-align: center;
}

ตัวอย่าง:

<div class="container-fluid">
  <div class="row text-center">
     <div class="col-md-12">
          Bootstrap 4 is coming....
      </div>
  </div>
</div>

— RustyIngles
แหล่งที่มา

ชี้แจงว่าคลาสนี้จะถูกเพิ่มที่ไหน

— aksu

สวัสดี @aksu คุณไม่จำเป็นต้องเพิ่ม. css ใด ๆ ดูตัวอย่างที่มีให้

— JoshYates1980

21

ด้วย Bootstrap v4 สิ่งนี้สามารถทำได้โดยการเพิ่ม.justify-content-centerลงไป.row <div>

<div class="row justify-content-center">
    <div class="col-1">centered 1 column</div>
</div>

https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content

— joknawe
แหล่งที่มา

15

วิธีนี้ใช้ได้ผล อาจเป็นวิธีที่แฮ็ก แต่ก็ใช้งานได้ดี มีการทดสอบการตอบสนอง (Y)

.centered {
    background-color: teal;
    text-align: center;
}

เดสก์ทอป

อ่อนไหว

— Ali Gajani
แหล่งที่มา

ใช้งานได้เพียงเพราะองค์ประกอบมีอินไลน์การทูต imgอาจจะตั้งเป็นบล็อก

— ProfileTwist

บางทีในกรณีทดสอบแยกของคุณ ฉันจะเพิ่ม.centered img { display: inline; }คำตอบของคุณแล้วมันจะคุ้มค่ากับการลงคะแนนแทน

— ProfileTwist

ไม่มีปัญหา. ผมแน่ใจว่า OP จะได้พบกับเขา / เธอคำตอบ :)

— อาลี Gajani

ใน bootstrap 3 คลาส. text-center ทำสิ่งเดียวกันตามที่ได้เรียนรู้ไปแล้ว

— domoarigato

7

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4 col-lg-offset-4">
            <img src="some.jpg">
        </div>
    </div>
</div>

— wali
แหล่งที่มา

6

ในการจัดจุดศูนย์กลางให้อยู่กึ่งกลางเราจำเป็นต้องใช้รหัสด้านล่าง cols เป็นองค์ประกอบที่ลอยอยู่นอกเหนือจากขอบอัตโนมัติ เราจะตั้งให้ลอยไม่มี

<body class="container">
    <div class="col-lg-1 col-md-4 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

หากต้องการจัดตำแหน่ง col-lg-1 ด้านบนด้วยคลาสที่กึ่งกลางเราจะเขียน:

.centered {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

ไปยังศูนย์เนื้อหาภายใน div การใช้text-align:center,

.centered {
    text-align: center;
}

ถ้าคุณต้องการจัดกึ่งกลางเฉพาะบนเดสก์ท็อปและหน้าจอที่ใหญ่กว่าไม่ใช่บนมือถือให้ใช้เคียวรีสื่อบันทึกต่อไปนี้

@media (min-width: 768px) {
    .centered {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}

และหากต้องการจัดวาง div ไว้เฉพาะบนมือถือ

@media (max-width: 768px) {
    .centered {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}

— Aamer Shahzad
แหล่งที่มา

6

เพียงแค่ตั้งค่าหนึ่งคอลัมน์ของคุณที่แสดงเนื้อหาเป็น col-xs-12 (มือถือเป็นครั้งแรก ;-) และกำหนดค่าคอนเทนเนอร์เท่านั้นเพื่อควบคุมความกว้างที่คุณต้องการให้เนื้อหาที่อยู่ตรงกลางของคุณเป็นดังนี้:

.container {
  background-color: blue;
}
.centered {
    background-color: red;
}

<body class="container col-xs-offset-3 col-xs-6">
    <div class="col-xs-12 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

ขยายตัวอย่างข้อมูล

<body class="container col-xs-offset-1 col-xs-10">
    <div class="col-xs-12 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

ขยายตัวอย่างข้อมูล

ดูตัวอย่างได้ที่http://codepen.io/Kebten/pen/gpRNMe :-)

— Kieran Ryan
แหล่งที่มา

6

อีกวิธีในการชดเชยคือการมีสองแถวว่างเปล่าตัวอย่างเช่น:

<div class="col-md-4"></div>
<div class="col-md-4">Centered Content</div>
<div class="col-md-4"></div>

— เลอรอย
แหล่งที่มา

1

2 div ที่ไม่มีประโยชน์ col-md-offset- * ดีกว่า

— ymakux

1

ฉันเห็นด้วย. ฉันใช้วิธีนั้นเพราะมันใช้งานได้ดีและผ่านการทดสอบ

— LeRoy

6

คุณสามารถใช้text-centerสำหรับแถวและสามารถตรวจสอบให้แน่ใจว่า div ภายในมีdisplay:inline-block(ไม่float)

เช่น:

<div class="container">
    <div class="row text-center" style="background-color : black;">
        <div class="redBlock">A red block</div>
        <div class="whiteBlock">A white block</div>
        <div class="yellowBlock">A yellow block</div>
    </div>
</div>

และ CSS:

.redBlock {
    width: 100px;
    height: 100px;
    background-color: aqua;
    display: inline-block
}
.whiteBlock {
    width: 100px;
    height: 100px;
    background-color: white;
    display: inline-block
}
.yellowBlock {
    width: 100px;
    height: 100px;
    background-color: yellow;
    display: inline-block
}

ซอ: http://jsfiddle.net/DTcHh/3177/

— Alireza Fattahi
แหล่งที่มา

6

ด้วย bootstrap 4 คุณสามารถลองjustify-content-md-centerตามที่กล่าวไว้ที่นี่

<div class="container">
    <div class="row justify-content-md-center">
        <div class="col col-lg-2">
              1 of 3
        </div>
        <div class="col-md-auto">
            Variable width content
        </div>
        <div class="col col-lg-2">
              3 of 3
        </div>
    </div>
    <div class="row">
        <div class="col">
             1 of 3
        </div>
        <div class="col-md-auto">
                Variable width content
        </div>
        <div class="col col-lg-2">
              3 of 3
        </div>
    </div>
</div>

— Hossein Narimani Rad
แหล่งที่มา

1

@ AdamErickson คำถามที่ถามโดยเฉพาะสำหรับวิธีการ bootstrap 3 เนื่องจากคำตอบนี้น่าจะเป็นวิธีใน BS4 ในปี 2019 ซอฟต์แวร์บางตัวยังใช้ bootstrap 3

— A1rPun

5

นี่อาจไม่ใช่คำตอบที่ดีที่สุด แต่มีวิธีแก้ปัญหาที่สร้างสรรค์มากกว่านี้ ตามที่อธิบายโดย koala_dev การชดเชยคอลัมน์จะทำงานได้กับขนาดคอลัมน์เท่านั้น อย่างไรก็ตามด้วยการซ้อนแถวคุณสามารถทำให้คอลัมน์ตรงกลางไม่เท่ากันได้เช่นกัน

เพื่อยึดติดกับคำถามเดิมที่คุณต้องการจัดคอลัมน์ 1 คอลัมน์ให้อยู่กึ่งกลางในตาราง 12

จัดคอลัมน์ให้อยู่ตรงกลางของ 2 โดยการชดเชย 5
สร้างแถวซ้อนเพื่อให้คุณได้รับ 12 คอลัมน์ใหม่ภายใน 2 คอลัมน์ของคุณ
เนื่องจากคุณต้องการจัดตำแหน่งคอลัมน์ 1 และ 1 คือ "ครึ่ง" ของ 2 (สิ่งที่เราจัดให้อยู่กึ่งกลางในขั้นตอนที่ 1) ตอนนี้คุณต้องจัดคอลัมน์ 6 คอลัมน์ไว้ในแถวที่ซ้อนกันของคุณซึ่งทำได้ง่ายโดยการชดเชย 3

ตัวอย่างเช่น:

<div class="container">
  <div class="row">
    <div class="col-md-offset-5 col-md-2">
      <div class="row">
        <div class="col-md-offset-3 col-md-6">
          centered column with that has an "original width" of 1 col
        </div>
      </div>
    </div>
  </div>
</div>

ดูซอนี้โปรดทราบว่าคุณต้องเพิ่มขนาดของหน้าต่างผลลัพธ์เพื่อดูผลลัพธ์เช่นกันมิฉะนั้นคอลัมน์จะถูกรวม

— reinder
แหล่งที่มา

5

นี่ไม่ใช่รหัสของฉัน แต่ทำงานได้อย่างสมบูรณ์ (ทดสอบบน Bootstrap 3) และฉันไม่ต้องยุ่งกับ col-offset

การสาธิต:

/* centered columns styles */

.col-centered {
  display: inline-block;
  float: none;
  /* inline-block space fix */
  margin-right: -4px;
  background-color: #ccc;
  border: 1px solid #ddd;
}

<div class="container">
  <div class="row text-center">
    <div class="col-xs-6 col-centered">Column 6</div>
    <div class="col-xs-6 col-centered">Column 6</div>
    <div class="col-xs-3 col-centered">Column 3</div>
    <div class="col-xs-3 col-centered">Column 3</div>
    <div class="col-xs-3 col-centered">Column 3</div>
  </div>
</div>

ขยายตัวอย่างข้อมูล

— เว็บ Binar
แหล่งที่มา

4

เราสามารถทำได้โดยใช้กลไกการจัดวางโต๊ะ:

กลไกคือ:

ล้อมคอลัมน์ทั้งหมดในหนึ่ง div
ทำให้ div นั้นเป็นตารางที่มีเลย์เอาต์ที่แน่นอน
ทำให้แต่ละคอลัมน์เป็นเซลล์ตาราง
ใช้คุณสมบัติจัดเรียงแนวตั้งเพื่อควบคุมตำแหน่งเนื้อหา

ตัวอย่างการสาธิตอยู่ที่นี่

— โมฮันเดเร
แหล่งที่มา

4

ผนวกตัวอย่างต่อไปนี้ภายใน. row หรือ. col ของคุณ นี่สำหรับ Bootstrap 4 *

d-flex justify-content-center

— Thomas Chirwa
แหล่งที่มา

3

ตามที่ koala_dev ใช้ในแนวทางที่ 1 ของเขาฉันต้องการวิธีการชดเชยแทน center-block หรือระยะขอบซึ่งมีการใช้งานที่ จำกัด แต่อย่างที่เขาพูดถึง:

ตอนนี้มีข้อเสียเปรียบที่ชัดเจนสำหรับวิธีนี้มันใช้ได้กับขนาดคอลัมน์เท่านั้นดังนั้น. col-X-2, .col-X-4, col-X-6, col-X-6, col-X-8 และ col-X- รองรับ 10 รายการ

สิ่งนี้สามารถแก้ไขได้โดยใช้วิธีการต่อไปนี้สำหรับคอลัมน์คี่

<div class="col-xs-offset-5 col-xs-2">
    <div class="col-xs-offset-3">
        // Your content here
    </div>
</div>

— Abhinav Singh
แหล่งที่มา

3

คุณสามารถใช้ flexbox โซลูชันที่มีความยืดหยุ่นสูงกับ Bootstrap ของคุณ

justify-content: center;

สามารถจัดคอลัมน์ให้อยู่ตรงกลาง

ตรวจสอบดิ้น

— รุนแรง
แหล่งที่มา

2

เนื่องจากฉันไม่เคยต้องการให้อยู่ตรงกลาง.col-ภายใน a เดียว.rowฉันจึงตั้งค่าคลาสต่อไปนี้บนการตัด.rowคอลัมน์เป้าหมายของฉัน

.col-center > [class*="col-"] {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

ตัวอย่าง

<div class="full-container">
    <div class="row col-center">
        <div class="col-xs-11">
            Foo
        </div>
        <div class="col-xs-11">
            Bar
        </div>
    </div>
</div>

— วอลเตอร์โรมัน
แหล่งที่มา

2

สำหรับผู้ที่ต้องการจัดวางองค์ประกอบคอลัมน์ไว้ที่กึ่งกลางหน้าจอเมื่อคุณไม่มีจำนวนที่แน่นอนในการเติมกริดของคุณฉันได้เขียน JavaScript เล็กน้อยเพื่อส่งคืนชื่อคลาส:

function colCalculator(totalNumberOfElements, elementsPerRow, screenSize) {
    var arrayFill = function (size, content) {
        return Array.apply(null, Array(size)).map(String.prototype.valueOf, content);
    };

    var elementSize = parseInt(12 / elementsPerRow, 10);
    var normalClassName = 'col-' + screenSize + '-' + elementSize;
    var numberOfFittingElements = parseInt(totalNumberOfElements / elementsPerRow, 10) * elementsPerRow;
    var numberOfRemainingElements = totalNumberOfElements - numberOfFittingElements;
    var ret = arrayFill(numberOfFittingElements, normalClassName);
    var remainingSize = 12 - numberOfRemainingElements * elementSize;
    var remainingLeftSize = parseInt(remainingSize / 2, 10);
    return ret.concat(arrayFill(numberOfRemainingElements, normalClassName + ' col-' + screenSize + '-push-' + remainingLeftSize));
}

หากคุณมี 5 องค์ประกอบและคุณต้องการที่จะมี 3 ต่อแถวบนmdหน้าจอคุณทำสิ่งนี้:

colCalculator(5, 3, 'md')
>> ["col-md-4", "col-md-4", "col-md-4", "col-md-4 col-md-push-2", "col-md-4 col-md-push-2"]

โปรดทราบว่าอาร์กิวเมนต์ที่สองต้องหารด้วย 12

— jsgoupil
แหล่งที่มา

2

หากต้องการจัดคอลัมน์มากกว่าหนึ่งคอลัมน์ในแถว Bootstrap - และจำนวน cols เป็นเลขคี่เพียงเพิ่มcssคลาสนี้ให้กับคอลัมน์ทั้งหมดในแถวนั้น:

.many-cols-centered {  // To horizontally center bootstrap odd cols, eg col-lg-9, col-md-3, works well in lg
  display:inline-block;
  float:none;
}

ดังนั้นใน HTML ของคุณคุณมีสิ่งต่อไปนี้:

<div class="row text-center"> <!-- text-center centers all text in that row -->
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image1.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image2.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image3.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
</div>

— Ruto Collins
แหล่งที่มา

2

ลองสิ่งนี้

<div class="row">
    <div class="col-xs-2 col-xs-offset-5"></div>
</div>

คุณสามารถใช้อื่น ๆcolเช่นเดียวกับcol-md-2ฯลฯ

— Ch UmarJamil
แหล่งที่มา

2

ฉันขอแนะนำให้ใช้คลาสtext-center:

<body class="container">
    <div class="col-md-12 text-center">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

— Dadhich Sourav
แหล่งที่มา

2

ลองรหัสนี้

<body class="container">
    <div class="col-lg-1 col-lg-offset-10">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

ที่นี่ฉันได้ใช้ col-lg-1 และออฟเซ็ตควรเป็น 10 สำหรับการแบ่งศูนย์กลางอย่างถูกต้องบนอุปกรณ์ขนาดใหญ่ หากคุณต้องการให้ศูนย์กลางอยู่ที่อุปกรณ์ขนาดกลางถึงใหญ่ให้เปลี่ยน lg เป็น md และอื่น ๆ

— Bangash
แหล่งที่มา

2

สารละลายBootstrap 4 :

<div class="container">
  <div class="row">
    <div class="col align-self-center">
      Column in the middle, variable width
    </div>
  </div>
</div>

— JanBrus
แหล่งที่มา

1

หากคุณวางสิ่งนี้ลงในแถวของคุณคอลัมน์ทั้งหมดข้างในจะถูกจัดกึ่งกลาง:

.row-centered {
    display: flex;
    justify-content: space-between;
}

— Eran Shabi
แหล่งที่มา

ทำให้องค์ประกอบไม่ตอบสนอง

— gfivehost

1

เพื่อให้ระบบกริดของ Bootstrap มีความแม่นยำมากขึ้นจะมี 12 คอลัมน์และเพื่อให้เนื้อหาอยู่ตรงกลางตัวอย่างเช่นเนื้อหานั้นใช้เวลาถึงหนึ่งคอลัมน์ หนึ่งจะต้องครอบครองสองคอลัมน์ของตาราง Bootstrap และวางเนื้อหาในครึ่งหนึ่งของสองคอลัมน์ครอบครอง

<div class="row">
   <div class="col-xs-2 col-xs-offset-5 centered">
      ... your content / data will come here ...
   </div>
</div>

'col-xs-offset-5' กำลังบอกระบบกริดที่จะเริ่มวางเนื้อหา

'col-xs-2' กำลังบอกระบบกริดว่าเนื้อหาควรอยู่ทางด้านซ้ายของคอลัมน์จำนวนมาก

'กึ่งกลาง' จะเป็นคลาสที่กำหนดซึ่งจะทำให้เนื้อหาอยู่กึ่งกลาง

นี่คือลักษณะที่ตัวอย่างนี้ปรากฏในระบบกริดของ Bootstrap

คอลัมน์:

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

....... ชดเชย ....... .data .......ไม่ได้ใช้........

— เทค
แหล่งที่มา

จัดคอลัมน์ให้อยู่กึ่งกลางโดยใช้ Twitter Bootstrap 3

วิธีที่ 1 (ออฟเซ็ต):

วิธีที่ 2 (เก่าmargin:auto)

อัปเดต 2018

HTML:

CSS:

เราสามารถทำได้โดยใช้กลไกการจัดวางโต๊ะ:

ตัวอย่างการสาธิตอยู่ที่นี่

วิธีที่ 2 (เก่า`margin:auto`)