Jak uzyskać wyśrodkowane treści za pomocą Twitter Bootstrap?

Staram się podążać za bardzo podstawowym przykładem. Korzystając ze strony początkowej i systemu siatki , miałem nadzieję, że:

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

... tworzyłby wyśrodkowany tekst.

Jednak nadal pojawia się po lewej stronie. Co ja robię źle?

Dotyczy to Centrowania tekstu (o co chodziło w pytaniu )

W przypadku innych rodzajów treści zobacz odpowiedź Flaviena .

Aktualizacja: Bootstrap 2.3.0+ Odpowiedź

Oryginalna odpowiedź dotyczyła wczesnej wersji bootstrap. Począwszy od bootstrap 2.3.0, możesz po prostu dać div klasę.text-center .

Oryginalna odpowiedź (wcześniejsza niż 2.3.0)

Musisz zdefiniować jedną z dwóch klas rowlub span12za pomocą text-align: center. Zobacz http://jsfiddle.net/xKSUH/ lub http://jsfiddle.net/xKSUH/1/

UWAGA: zostało to usunięte w Bootstrap 3 .

Przed uruchomieniem 3 można użyć klasy CSS w pagination-centerednastępujący sposób:

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

Klasa pagination-centeredjest już w bootstrap.css (lub bootstrap.min.css) i ma jedyną regułę:

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

Z Bootstrap 2.3.0. po prostu użyj klasytext-center

Chyba większość ludzi tutaj szuka sposobu na wyśrodkowanie całości,div a nie tylko tekstu (co jest banalne…).

Drugim sposobem (zamiast użycia text-align: center) wyśrodkowania rzeczy w HTML jest posiadanie elementu o stałej szerokości i automatycznym marginesie (po lewej i po prawej). W przypadku Bootstrap styl marginesów automatycznych definiujących styl to klasa „kontener”.

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

Spójrz tutaj na skrzypce: http://jsfiddle.net/D2RLR/7788/

Aktualizacja 2019 - Bootstrap 4

„Wyśrodkowana zawartość” może oznaczać wiele różnych rzeczy, a centrowanie Bootstrap bardzo się zmieniło od czasu pierwszego postu.

Centrum poziome

Bootstrap 3

• text-centersłuży do display:inlineelementów
• center-blockdo centrowania display:blockelementów
• col-*offset-* do centrowania kolumn siatki
• zobacz tę odpowiedź, aby wyśrodkować pasek nawigacyjny

Demo Bootstrap 3 Poziome centrowanie

Bootstrap 4

• text-centerjest nadal używany do display:inlineelementów
• mx-autozastępuje elementy center-blockśrodkowedisplay:block
• offset-* lub mx-auto może być użyty do wyśrodkowania kolumn siatki
• justify-content-centerw rowmoże być również używany do centrumcol-*

mx-auto(marginesy automatycznego oś x) będzie koncentrować display:blocklub display:flexelementów, które mają określoną szerokość , ( %, vw, pxitp ..). Flexbox jest domyślnie używany w kolumnach siatki, więc istnieją również różne metody centrowania Flexbox.

Demo Bootstrap 4 Poziome centrowanie

Centrum pionowe

Teraz, gdy Bootstrap 4 jest domyślnie Flexbox, istnieje wiele różnych podejść do wyrównania w pionie za pomocą: auto-marginesów , narzędzi Flexbox lub narzędzi wyświetlania wraz z narzędziami wyrównania pionowego . Na początku „narzędzia do wyrównywania w pionie” wydają się oczywiste, ale działają one tylko z wbudowanymi i tabelowymi elementami wyświetlającymi. Oto niektóre opcje centrowania pionowego Bootstrap 4.

1 - Środek pionowy przy użyciu automatycznych marginesów:

Innym sposobem na wyśrodkowanie w pionie jest użycie my-auto. Spowoduje to wyśrodkowanie elementu w jego kontenerze. Na przykład ustawia h-100wiersz na pełną wysokość i my-autowyśrodkuje col-sm-12kolumnę pionowo .

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

Pionowe centrum Korzystanie Auto Marginesy Demo

my-auto reprezentuje marginesy na pionowej osi y i jest równoważny:

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

2 - Centrum pionowe z Flexbox:

Ponieważ Bootstrap 4 .rowjest teraz display:flex, możesz po prostu użyć align-self-centerdowolnej kolumny, aby wyśrodkować ją pionowo ...

       <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>

lub użyj align-items-centercałości, .rowaby wyśrodkować w pionie wszystkie col-*w rzędzie ...

       <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>

Demonstracja pionowych środkowych kolumn o różnych wysokościach

3 - Środek pionowy za pomocą wyświetlaczy:

Bootstrap 4 ma narzędzi z ekranu , który może być używany do display:table, display:table-cell, display:inline, etc .. Mogą one być stosowane z pionowych utils wyrównanie , aby wyrównać inline inline bloku lub elementy komórka tabeli.

<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>

Centrum w pionie za pomocą narzędzia Display Demo

Bootstrap 3.1.1 ma .center-blockklasę do centrowania div. Zobacz: http://getbootstrap.com/css/#helper-classes-center .

Wyśrodkuj bloki zawartości Ustaw element display: blocki wyśrodkuj go margin. Dostępne jako mixin i klasa.

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

Lub, jak już powiedzieli inni, użyj .text-centerklasy do wyśrodkowania tekstu.

Najlepszym sposobem na to jest zdefiniowanie stylu css:

.centered-text {
    text-align:center
}    

Następnie tam, gdzie potrzebujesz wycentrowanego tekstu, dodajesz go w następujący sposób:

<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>

lub jeśli chcesz, aby znacznik p był wyśrodkowany:

<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>

Im mniej wbudowane css, tym lepiej.

Klasa .show-grid stosuje tekst wyrównany do środka w przykładzie w łączu.

Zawsze możesz dodać style="text-align:center"do div wiersza lub innej klasy, jak sądzę.

W lutym 2013 roku w niektórych przypadkach dodałem klasę „wyśrodkowaną” do div „span”:

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

i do CSS:

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

Powodem tego jest to, że div span * div zostaje przesunięty w lewo, a technika centrowania „auto margin” działa tylko wtedy, gdy div nie jest floated.

Demo (na JSFiddle): http://jsfiddle.net/5RpSh/8/embedded/result/

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

Jeśli używasz Bootstrap 3, ma on również wbudowaną klasę CSS o nazwie .text-center . To jest to czego chcesz.

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

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

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

Zobacz przykład w jsfiddle. http://jsfiddle.net/ucheng/Q4Fue/

Bootstrap 2.3 ma text-centerklasę.

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

Z mojej strony definiuję nowe CSSstyle gotowe do użycia i łatwe do zapamiętania:

.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;}

Czy to dobry pomysł? Czy jest na to jakaś dobra praktyka?

Jeśli używasz Bootstrap 2.0+

Może to spowodować, że div będzie wyśrodkowany na stronie.

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

Każda klasa narzędzia do wyrównywania tekstu załatwi sprawę. Bootstrap od dłuższego czasu używa .text-centerklasy do centrowania tekstu.

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

Lub możesz stworzyć własne narzędzia. Niektóre odmiany, które widziałem przez lata:

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

Musisz dostosować za pomocą .span .

Przykład:

<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>

Moją preferowaną metodą centrowania bloków informacji przy jednoczesnym zachowaniu responsywności (kompatybilność z urządzeniami mobilnymi) jest umieszczenie dwóch pustych elementów span1div przed i po treści, którą chcesz wyśrodkować.

<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-->

W przypadku Bootstrap w wersji 3.1.1 i wyższej najlepszą klasą do centrowania zawartości jest .center-blockklasa pomocnicza.

<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>

Nie należy używać płynu w pojemniku w głównym.

Blok środkowy jest również opcją nie wymienioną w powyższych odpowiedziach

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

Cała klasa center-block robi , to powiedzieć elementowi, aby miał margines 0 auto, auto to lewy / prawy margines. Jednakże, chyba że klasa text-center lub css text-align: center; jest ustawiony na elemencie nadrzędnym, element nie zna punktu, od którego należy wykonać to automatyczne obliczanie, więc nie będzie się centrował zgodnie z oczekiwaniami.

Tak więc centrum tekstowe jest lepszą opcją.

Możesz użyć dowolnego z poniższych typów

1. Użyj istniejącej klasy Bootstrap text-center.
2. Dodawanie niestandardowego stylu style = "text-align:center".

3. Użyj przesunięcia kolumny:

   Przykład: <div class="col-md-offset-6 col-md-12"></div>

Stworzyłem tę klasę, aby zachować wyśrodkowanie niezależnie od rozmiaru ekranu, zachowując jednocześnie responsywne funkcje:

.container {
    alignment-adjust: central;
}

Po prostu użyj klasy, centrum tekstowego, dla wybranego div lub tagu. Myślę, że może działać dobrze. Jest to klasa Bootstrap dla centrum wyrównywania tekstu.

Oto kilka klas wyrównania tekstu 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>

Próbowałem na dwa sposoby i dobrze działało centrowanie div. Oba sposoby wyrównają div na wszystkich ekranach.

Sposób 1: Używanie push:

<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>

Sposób 2: Korzystanie z przesunięcia:

<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>

Wynik:

Wyjaśnienie

Bootstrap wyznaczy po lewej stronie pierwszą kolumnę określonego zajętości ekranu. Jeśli użyjemy przesunięcia lub przesunięcia, kolumna „ta” zostanie przesunięta o „te” wiele kolumn. Chociaż napotkałem pewne problemy w zakresie reakcji offsetu, push był niesamowity.

Aktualizacja 2018:

W Bootstrap 4.1.3 zawartość można wyśrodkować za pomocą klasy mx-auto.

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

Odniesienie: https://getbootstrap.com/docs/4.1/utilities/spacing/#horizontal-centering