Twitter Bootstrap - วิธีจัดองค์ประกอบต่างๆในแนวนอนหรือแนวตั้ง

285

มีวิธีใดที่จะทำให้องค์ประกอบ html อยู่กึ่งกลางแนวตั้งหรือแนวนอนภายในพ่อแม่หลัก

css twitter-bootstrap

— ฉันเอง
แหล่งที่มา

2

นี่เป็นโพสต์ที่ยอดเยี่ยมเกี่ยวกับการจัดกึ่งกลางแนวนอนและแนวตั้ง: ดูที่นี่

— markvandencorput

2

ฉันก็กำลังเผชิญปัญหาในการจัดแนวนอน ฉันใช้<center></center>แท็ก

— Utpal - Ur Best Pal

4

@ Utpal-UrBestPal <center>แท็กเลิกใช้แล้วประมาณ 12 ปีที่แล้ว

— Niels Keurentjes

246

อัปเดต : แม้ว่าคำตอบนี้น่าจะถูกแก้ไขในต้นปี 2013 แต่ก็ไม่ควรใช้อีกต่อไป วิธีการแก้ปัญหาที่เหมาะสมใช้ชดเชย

สำหรับข้อเสนอแนะผู้ใช้อื่น ๆ นอกจากนี้ยังมีคลาส bootstrap ดั้งเดิมเช่น:

class="text-center"
class="pagination-centered"

ขอบคุณ @Henning และ @trejder

— ฉันเอง
แหล่งที่มา

22

สไตล์เดียวกันที่แน่นอนมีอยู่แล้วใน Bootstrap; เพียงใช้class="text-center"

— Henning

3

หรือ.pagination-centeredเป็นทางเลือก

— trejder

7

นี่ควรเป็นคำตอบส่วนอีกคนไม่สนใจส่วน 'bootstrap' ทั้งหมดของคำถาม

— Ryan McDonough

1

@ RyanMcDonough ใช่ได้อย่างมีประสิทธิภาพนี่คือ riassuming คนอื่น ๆ ทั้งหมดที่แนะนำดังนั้นฉันจึงตรวจสอบว่าเป็นคำตอบที่ตกลงหรือไม่

— itsme

1

การใช้text-centerเลย์เอาต์เป็นการฝึกที่แย่มาก วิธีที่เหมาะสมในการจัดแนวคอลัมน์ใน Bootstrap คือการใช้col-XX-offset-Yคลาส getbootstrap.com/css/#grid-offsetting คำตอบนี้น่าจะถูกต้องในปี 2013 แต่ไม่ควรใช้อีกต่อไปในวันนี้

— Niels Keurentjes

76

จากเอกสาร Bootstrap :

กำหนดองค์ประกอบและศูนย์ผ่านdisplay: block marginมีทั้งมิกซ์อินและคลาส

<div class="center-block">...</div>

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

55

สำหรับผู้เยี่ยมชมอนาคตสำหรับคำถามนี้:

หากคุณพยายามจัดกึ่งกลางภาพใน div แต่ภาพไม่ได้อยู่ตรงกลางสิ่งนี้อาจอธิบายปัญหาของคุณได้:

jsFiddle DEMO ของปัญหา

<div class="col-sm-4 text-center">
    <img class="img-responsive text-center" src="myPic.jpg" />
</div>

img-responsiveชั้นเพิ่มdisplay:blockการเรียนการสอนในแท็กภาพที่จะหยุดtext-align:center( text-centerclass) จากการทำงาน

สารละลาย:

<div class="col-sm-4">
    <img class="img-responsive center-block" src="myPic.jpg" />
</div>

jsFiddle of the solution

การเพิ่มcenter-blockคลาสจะแทนที่display:blockคำสั่งที่ใส่โดยใช้img-responsiveคลาส

หากไม่มีimg-responsiveคลาสรูปภาพจะอยู่กึ่งกลางโดยเพิ่มtext-centerคลาส

ปรับปรุง:

นอกจากนี้คุณควรรู้พื้นฐานของflexboxและวิธีการใช้มันตั้งแต่Bootstrap4 ตอนนี้ใช้มันโดยกำเนิด

นี่คือวิดีโอการสอนที่ยอดเยี่ยมและรวดเร็วโดยแบรดชิฟฟ์

นี่คือแผ่นโกงที่ดี

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

32

อัปเดตในปี 2018

ในBootstrap 4ที่อยู่ตรงกลางวิธีการที่มีการเปลี่ยนแปลง ..

ศูนย์แนวนอนใน BS4

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

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

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

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

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

30

คุณสามารถเขียนลงในไฟล์ css ของคุณโดยตรงเช่นนี้:

.content {
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
  }

<div class = "content" >
  
   <p> some text </p>
  </div>

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

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

9

ฉันใช้สิ่งนี้

<style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0 0;
    }

    .container-fluid {
        height: 100%;
        display: table;
        width: 100%;
        padding-right: 0;
        padding-left: 0;
    }

    .row-fluid {
        height: 100%;
        display: table-cell;
        vertical-align: middle;
        width: 100%;
    }

    .centering {
        float: none;
        margin: 0 auto;
    }
</style>
<body>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="offset3 span6 centering">
                content here
            </div>
        </div>
    </div>
</body>

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

1

ไม่ทำงานในบางกรณี (ดูความคิดเห็นเกี่ยวกับหลักคำตอบเดียวกันและไม่ได้ใช้ประโยชน์จากการเรียน Bootstrap เฉพาะสำหรับตรงกลาง .

— แดนดาสคเลสุ

7

สำหรับการจัดศูนย์กลางแนวนอนคุณสามารถมีสิ่งนี้:

.centering{
float:none;
margin:0 auto
}

 <div class="span8 centering"></div>

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

4

ไม่ทำงาน (อย่างน้อยไม่ได้อยู่ในการดำเนินการในปัจจุบัน) <img src="img/logo.png" style="float:none; margin:0 auto" />เมื่อนำมาใช้โดยตรงในภาพ: ล้อมรอบimgกับผู้ปกครองdivและให้.text-centerหรือ.pagination-centeredชั้นเรียนให้กับผู้ปกครองทำงานเหมือนมีเสน่ห์

— trejder

2

ในการจัดองค์ประกอบให้อยู่ตรงกลางด้วยระยะห่าง: 0 อัตโนมัติคุณจะต้องเพิ่มความกว้างให้กับองค์ประกอบนั้น ในตัวอย่างด้านบนไม่มีการระบุความกว้างเนื่องจาก span8 มีความกว้างเป็น boobstrap แต่ภาพของคุณไม่ได้เป็นอย่างนั้น <img src = "img / logo.png" style = "float: none; margin: 0 auto; width: 300px" /> จะจัดกึ่งกลางของภาพในแนวนอนในแม่

— ราอูล

2

สิ่งนี้จะละเว้นส่วน "Bootstrap" ของคำถาม

— Dan Dascalescu

5

ฉันชอบวิธีนี้จากคำถามที่คล้ายกัน https://stackoverflow.com/a/25036303/2364401ใช้text-centerคลาสbootstraps กับข้อมูลตารางจริง<td>และ<th>องค์ประกอบส่วนหัวของตาราง ดังนั้น

<td class="text-center">Cell data</td>

และ

<th class="text-center">Header cell data</th>

— แซนเดอมิลเลอร์
แหล่งที่มา

5

ด้วย bootstrap 4 คุณสามารถใช้ flex ได้

<div class="d-flex justify-content-center align-items-center">
    <button type="submit" class="btn btn-primary">Create</button>
</div>

แหล่งที่มา: bootstrap 4.1

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

3

bootstrap 4 + Flex แก้ปัญหานี้

คุณสามารถใช้ได้

<div class="d-flex justify-content-center align-items-center">
    <button type="submit" class="btn btn-primary">Create</button>
</div>

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

ควรจัดกึ่งกลางแนวนอนและแนวตั้งไว้กึ่งกลาง

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

0

ฉันค้นพบใน Bootstrap 4 คุณสามารถทำได้:

ศูนย์แนวนอนเป็นtext-centerชั้นแน่นอน

กึ่งกลางแนวตั้งอย่างไรก็ตามการใช้คลาส bootstrap กำลังเพิ่มทั้งสองmb-auto mt-autoเพื่อให้ขอบด้านบนและด้านล่างของขอบถูกตั้งค่าเป็นอัตโนมัติ

— ออนไลน์โทมัส
แหล่งที่มา

0

สำหรับbootstrap4กึ่งกลางแนวตั้งของบางรายการ

d-flexสำหรับกฎ flex

ดิ้นคอลัมน์สำหรับทิศทางแนวตั้งในรายการ

justify-content-centerสำหรับการจัดกึ่งกลาง

style = 'height: 300px;' ต้องมีสำหรับจุดที่กำหนดไว้ที่กึ่งกลางคำนวณหรือใช้คลาสh-100

<div class="d-flex flex-column justify-content-center bg-secondary" style="
    height: 300px;
">
    <div class="p-2 bg-primary">Flex item</div>
    <div class="p-2 bg-primary">Flex item</div>
    <div class="p-2 bg-primary">Flex item</div>
  </div>

— Ramil Gilfanov
แหล่งที่มา