คุณจะรับเนื้อหาที่เป็นศูนย์กลางโดยใช้ Twitter Bootstrap ได้อย่างไร

ฉันพยายามทำตามตัวอย่างพื้นฐานมาก ใช้หน้าเริ่มต้นและระบบกริดฉันหวังว่าต่อไปนี้:

<div class="row">
  <div class="span12">
    <h1>Bootstrap starter template</h1>
    <p>Example text.</p>
  </div>
</div>

... จะสร้างข้อความกึ่งกลาง

อย่างไรก็ตามมันยังคงปรากฏบนด้านซ้ายสุด ผมทำอะไรผิดหรือเปล่า?

สิ่งนี้มีไว้สำหรับ Text Centering ( ซึ่งเป็นคำถามที่เกี่ยวกับ )

สำหรับเนื้อหาประเภทอื่น ๆ โปรดดูคำตอบของ Flavien

อัปเดต: Bootstrap 2.3.0+ คำตอบ

คำตอบเดิมสำหรับ bootstrap รุ่นแรก ในฐานะของ bootstrap 2.3.0 คุณสามารถให้ div คลาส.text-centerได้

คำตอบเดิม (ก่อน 2.3.0)

คุณจำเป็นต้องกำหนดหนึ่งในสองชั้นrowหรือมีspan12 text-align: centerดูhttp://jsfiddle.net/xKSUH/หรือhttp://jsfiddle.net/xKSUH/1/

หมายเหตุ: นี้ถูกถอดออกใน Bootstrap 3

Pre-Bootstrap 3 คุณสามารถใช้คลาส CSS pagination-centeredดังนี้:

<div class="span12 pagination-centered">
    Centered content.
</div>

คลาสpagination-centeredมีอยู่ใน bootstrap.css (หรือ bootstrap.min.css) และมีกฎเดียวเท่านั้น:

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

ด้วยBootstrap 2.3.0 แค่ใช้คลาสtext-center

ฉันเดาว่าคนส่วนใหญ่ที่นี่กำลังค้นหาวิธีที่จะรวมศูนย์ทั้งหมดdivและไม่เพียง แต่เนื้อหาข้อความ (ซึ่งเป็นเรื่องเล็กน้อย ... )

วิธีที่สอง (แทนที่จะใช้การจัดแนวข้อความ: กึ่งกลาง) เพื่อจัดกึ่งกลางสิ่งต่างๆใน HTML คือการมีองค์ประกอบที่มีความกว้างคงที่และระยะขอบอัตโนมัติ (ซ้ายและขวา) ด้วย Bootstrap สไตล์ที่กำหนดระยะขอบอัตโนมัติคือคลาส "คอนเทนเนอร์"

<div class="container">
    <div class="span12">
        "Centered stuff there"
    </div>
</div>

ลองดูที่นี่เพื่อซอ: http://jsfiddle.net/D2RLR/7788/

อัพเดท 2019 - Bootstrap 4

"เนื้อหากึ่งกลาง" อาจหมายถึงสิ่งต่าง ๆ มากมายและการเริ่มต้น Bootstrap อยู่ตรงกลางมีการเปลี่ยนแปลงมากมายตั้งแต่โพสต์ต้นฉบับ

ศูนย์แนวนอน

Bootstrap 3

• text-centerใช้สำหรับdisplay:inlineองค์ประกอบ
• center-blockdisplay:blockองค์ประกอบกลาง
• col-*offset-* ไปยังศูนย์คอลัมน์กริด
• ดูคำตอบนี้เพื่อจัดกึ่งกลางแถบนำทาง

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

Bootstrap 4

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

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

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

ศูนย์แนวตั้ง

ตอนนี้เงินทุน 4 เป็นflexbox โดยค่าเริ่มต้นมีหลายวิธีที่แตกต่างกันในการจัดตำแหน่งแนวตั้งโดยใช้: อัตโนมัติอัตรากำไรขั้นต้น , utils flexboxหรือutils จอแสดงผลพร้อมกับutils จัดแนวตั้ง ในตอนแรก "แนวจัดแนวตั้ง" ดูเหมือนชัดเจน แต่สิ่งเหล่านี้ใช้ได้กับองค์ประกอบการแสดงผลแบบอินไลน์และตารางเท่านั้น ต่อไปนี้เป็นตัวเลือกการจัดกึ่งกลางแนวตั้ง Bootstrap 4 ..

1 - ศูนย์แนวตั้งโดยใช้ระยะขอบอัตโนมัติ:

my-autoวิธีการศูนย์แนวตั้งก็คือการใช้ สิ่งนี้จะทำให้องค์ประกอบอยู่ตรงกลางภายในคอนเทนเนอร์ ตัวอย่างเช่นh-100ทำให้แถวมีความสูงเต็มและmy-autoจะจัดแนวcol-sm-12คอลัมน์เป็นแนวตั้ง

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

ศูนย์แนวตั้งโดยใช้การสาธิตระยะขอบอัตโนมัติ

my-auto แสดงระยะขอบบนแกน y ในแนวตั้งและเทียบเท่ากับ:

margin-top: auto;
margin-bottom: auto;

2 - ศูนย์แนวตั้งพร้อม Flexbox:

เนื่องจาก Bootstrap 4 .rowเป็นตอนนี้display:flexคุณสามารถใช้align-self-centerในคอลัมน์ใดก็ได้เพื่อจัดกึ่งกลางแนวตั้ง ...

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

หรือใช้align-items-centerทั้งหมด.rowเพื่อจัดกึ่งกลางแนวตั้งทั้งหมดcol-*ในแถว ...

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

การสาธิตคอลัมน์แนวตั้งศูนย์กลางความสูงที่แตกต่างกัน

3 - ศูนย์กลางแนวตั้งโดยใช้ประโยชน์จากการแสดงผล:

Bootstrap 4 มีutils จอแสดงผลที่สามารถนำมาใช้สำหรับdisplay:table, display:table-cell, display:inlineฯลฯ .. เหล่านี้สามารถใช้กับutils แนวตั้งที่จะจัดแบบอินไลน์, อินไลน์บล็อกหรือตารางองค์ประกอบของเซลล์

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

ศูนย์แนวตั้งโดยใช้การสาธิตการใช้ประโยชน์ดิสเพลย์

Bootstrap 3.1.1มี.center-blockคลาสสำหรับการแบ่งศูนย์กลาง divs ดู: http://getbootstrap.com/css/#helper-classes-center

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

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

หรืออย่างที่คนอื่นพูดไปแล้วให้ใช้.text-centerคลาสนี้เพื่อจัดกึ่งกลางข้อความ

วิธีที่ดีที่สุดในการทำเช่นนี้คือกำหนดรูปแบบ css:

.centered-text {
    text-align:center
}    

จากนั้นเมื่อใดก็ตามที่คุณต้องการข้อความกึ่งกลางที่คุณเพิ่มเข้าไปเช่น:

<div class="row">
    <div class="span12 centered-text">
        <h1>Bootstrap starter template</h1>
        <p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
    </div>
</div>

หรือถ้าคุณต้องการให้แท็ก p อยู่กึ่งกลาง:

<div class="row">
    <div class="span12 centered-text">
        <h1>Bootstrap starter template</h1>
        <p class="centered-text">Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
    </div>
</div>

css แบบอินไลน์น้อยกว่าคุณใช้ดีกว่า

class .show-grid ใช้ข้อความที่จัดแนวกึ่งกลางในตัวอย่างในลิงก์

คุณสามารถเพิ่มstyle="text-align:center"ไปยัง div แถวของคุณหรือชั้นอื่น ๆ ที่ฉันคิด

ในเดือนกุมภาพันธ์ 2013 ในบางกรณีฉันเพิ่มคลาส "กึ่งกลาง" ลงใน div "span":

<div class="container">
  <div class="row">
    <div class="span9 centred">
      This div will be centred.
    </div>
  </div>
</div>

และ CSS:

[class*="span"].centred {
  margin-left: auto;
  margin-right: auto;
  float: none;
}

เหตุผลนี้เป็นเพราะ span * div ถูกลอยไปทางซ้ายและเทคนิคการจัดกึ่งกลาง "auto margin" จะทำงานเฉพาะเมื่อ div ไม่ลอย

การสาธิต (บน JSFiddle): http://jsfiddle.net/5RpSh/8/embedded/result/

JSFiddle: http://jsfiddle.net/5RpSh/8/

ถ้าคุณใช้เงินทุน 3 ก็ยังมีในตัวคลาส CSS ชื่อ.Text ศูนย์ นั่นคือสิ่งที่คุณต้องการ

<div class="text-left">
    left
</div>

<div class="text-center">
    center
</div>

<div class="text-right">
    right
</div>

โปรดดูตัวอย่างใน jsfiddle http://jsfiddle.net/ucheng/Q4Fue/

Bootstrap 2.3 มีtext-centerคลาส

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

ในด้านของฉันฉันกำหนดCSSรูปแบบใหม่พร้อมใช้งานและง่ายต่อการจำ:

.center { text-align: center;}
.left { text-align: left;}
.right { text-align: right;}
.justify { text-align: justify;}
.fleft { float: left;} /*-> similar to .pull-left already existing in bootstrap*/
.fright { float: right;}  /*-> similar to .pull-right already existing in bootstrap*/
.vab { vertical-align: bottom;}
.bold { font-weight: bold;}
.italic { font-style: italic;}

มันเป็นความคิดที่ดีหรือไม่? มีวิธีปฏิบัติที่ดีสำหรับเรื่องนี้หรือไม่?

หากคุณใช้ Bootstrap 2.0+

สิ่งนี้สามารถทำให้ div อยู่ตรงกลางของหน้า

<div class="row">
    <div class="span4 offset4">
        //your content here gets centered of the page
    </div>
</div>

คลาสยูทิลิตี้จัดข้อความใด ๆ จะทำเคล็ดลับ Bootstrap ใช้.text-centerคลาสสำหรับการจัดกึ่งกลางข้อความเป็นเวลานานแล้ว

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

หรือคุณสามารถสร้างโปรแกรมอรรถประโยชน์ของคุณเอง รูปแบบบางอย่างที่ฉันเห็นในช่วงหลายปีที่ผ่านมา:

.u-text-center { text-align: center !important; }
.ta-center { text-align: center !important; }
.ta\:c { text-align: center !important; }

.spanคุณจำเป็นต้องปรับด้วย

ตัวอย่าง:

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span4"></div>
    <!--/span-->
    <div class="span4" align="center">
      <div class="hero-unit" align="center">
        <h3>Sign In</h3>
        <form>
          <div class="input-prepend">
            <span class="add-on"><i class="icon-envelope"></i> </span>
            <input class="span6" type="text" placeholder="Email address">
          </div>
          <div class="input-prepend">
            <span class="add-on"><i class="icon-key"></i> </span>
            <input class="span6" type="password" placeholder="Password">
          </div>
        </form>
      </div>
    </div>
    <!-- /span -->
    <div class="span4"></div>
  </div>
  <!-- /row -->
</div>

วิธีที่ฉันต้องการสำหรับการจัดบล็อกข้อมูลไว้ตรงกลางในขณะที่รักษาการตอบสนอง (ความเข้ากันได้กับมือถือ) คือการวางspan1div ที่ว่างเปล่าไว้สองรายการก่อนและหลังเนื้อหาที่คุณต้องการให้อยู่ตรงกลาง

<div class="row-fluid">

    <div class="span1">
    </div>

        <div class="span10">
          <div class="hero-unit">
            <h1>Reading Resources</h1>
            <p>Read here...</p>
          </div>
        </div><!--/span-->

    <div class="span1">
    </div>

</div><!--/row-->

สำหรับ Bootstrap เวอร์ชัน 3.1.1 ขึ้นไปคลาสที่ดีที่สุดสำหรับการจัดกึ่งกลางเนื้อหาคือ.center-blockคลาสตัวช่วย

<div class="container">
  <div class="col-md-12 centered">
    <div class="row">
      <div class="col-md-1"></div>
       <div class="col-md-10">
           label
       </div>
      <div class="col-md-1"></div>
    </div>
  </div>
</div>

อย่าใช้ภาชนะบรรจุของเหลวในตัวเครื่อง

บล็อกกลางยังเป็นตัวเลือกที่ไม่ได้กล่าวถึงข้างต้นคำตอบ

    <div class="center-block" style="width:200px;background-color:#ccc;">...</div>

คลาสทั้งหมดcenter-blockทำเพื่อบอกองค์ประกอบให้มีระยะขอบเป็น 0 อัตโนมัติซึ่งเป็นระยะขอบซ้าย / ขวา อย่างไรก็ตามเว้นแต่ class-center text หรือ css text-align: center; มีการตั้งค่าไว้ในพาเรนต์องค์ประกอบไม่ทราบว่าจะคำนวณการคำนวณอัตโนมัตินี้ได้อย่างไรจึงจะไม่จัดกึ่งกลางตัวเองตามที่คาดไว้

ดังนั้นศูนย์ข้อความจึงเป็นตัวเลือกที่ดีกว่า

คุณสามารถใช้ประเภทใดประเภทหนึ่งต่อไปนี้

1. ใช้คลาส Bootstrap ที่มีอยู่ text-centerใช้คลาสที่มีอยู่
2. style = "text-align:center"การเพิ่มรูปแบบที่กำหนดเอง

3. ใช้การชดเชยคอลัมน์:

   ตัวอย่าง: <div class="col-md-offset-6 col-md-12"></div>

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

.container {
    alignment-adjust: central;
}

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

นี่คือการจัดแนวข้อความ Bootstrap คลาสต่างๆ:

text-left, text-right, text-justify, etc.
<div class="row">
 <div class="col-md-12 text-center">
  <h1>Bootstrap starter template</h1>
  <p>Example text.</p>
 </div>
</div>

ฉันลองสองวิธีและใช้งานได้ดีในการจัดศูนย์กลาง div ทั้งสองวิธีจะจัดแนว divs บนหน้าจอทั้งหมด

วิธีที่ 1: ใช้การกด:

<div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4 col-lg-push-4 col-md-push-4 col-sm-push-4 col-xs-push-4" style="border-style:solid;border-width:1px">
    <h2>Grievance form</h2> <!-- To center this text, use style="text-align: center" -->
  </div>

วิธีที่ 2: ใช้ Offset:

<div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4 col-lg-offset-4 col-md-offest-4 col-sm-offest-4 col-xs-offest-4" style="border-style:solid;border-width:1px">
    <h2>Grievance form</h2> <!--to center this text, use style="text-align: center"-->
</div>

ผลลัพธ์:

คำอธิบาย

Bootstrap จะกำหนดไปทางซ้ายคอลัมน์แรกของการเข้าชมหน้าจอที่ระบุ หากเราใช้ offset หรือ push มันจะเปลี่ยนคอลัมน์ 'this' เป็น 'หลาย' คอลัมน์ แม้ว่าฉันจะเผชิญกับปัญหาบางอย่างในการตอบสนองของการชดเชย แต่การผลักก็ยอดเยี่ยม

อัปเดต 2018:

ในBootstrap 4.1.3 , mx-autoเนื้อหาที่สามารถเป็นศูนย์กลางใช้คลาส

<div class="mx-auto">
  Centered element
</div>

การอ้างอิง: https://getbootstrap.com/docs/4.1/utilities/spacing/#horizontal-centering