Cum puteți obține conținut centrat folosind Twitter Bootstrap?

Am'm încercând să urmeze un exemplu foarte de bază. Folosind pagina de pornire și sistemul de rețea, speram următoarele:

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

...ar produce centrată pe text.

Cu toate acestea, se pare încă de pe extrema stângă. Ce fac gresit?

Peter Mortensen
Întrebarea editată 28 octombrie 2017 в 10:09
Programare
html css twitter-bootstrap
7 februarie 2012 в 9:21
1 vizualizare
Comentarii la întrebare (4)
Soluția

Acest lucru este pentru Text de Centrare (care este ceea ce întrebarea a fost despre)

Pentru alte tipuri de conținut, a se vedea Flavien's a răspunde.

Actualizare: Bootstrap 2.3.0+ Răspuns

A răspuns inițial a fost pentru o versiune timpurie de bootstrap. Ca de bootstrap 2.3.0, puteți pur și simplu să dea div class .text-center.

Răspuns inițial (pre 2.3.0)

Aveți nevoie pentru a defini una din cele două clase, " row "sau span12", cu un " text-align: center. Vezi http://jsfiddle.net/xKSUH/ sau http://jsfiddle.net/xKSUH/1/

Comentarii (9)

NOTĂ: acest lucru a fost eliminat în Bootstrap 3.

Pre-Bootstrap 3, ai putea folosi clasa CSS paginare-centrat astfel:

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

Clasa paginare-centrat` este deja în bootstrap.css (sau bootstrap.min.css) și are doar o singură regulă:

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

Cu Bootstrap 2.3.0. doar folosi clasa text-center

Comentarii (6)

Cred că majoritatea oamenilor de aici sunt de fapt în căutarea pentru modul de a centru de toată div și nu numai conținutul textului (care este banal...).

Cea de-a doua cale (în loc de a folosi text-align:center) la centru lucrurile în HTML este de a avea un element cu o lățime fixă și auto marja (stânga și dreapta). Cu Bootstrap, stilul definirea auto marjele este "recipient" clasă.

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

Aruncati o privire aici pentru vioară: http://jsfiddle.net/D2RLR/7788/

Comentarii (6)

Actualizare 2019 - Bootstrap 4

"conținut Centrat" poate însemna multe lucruri diferite, și Bootstrap centrarea s-a schimbat mult de la primul post.

Orizontală Center

Bootstrap 3

  • text-center este folosit pentru display:inline elemente
  • centru-blocde la centrudisplay:block` elemente
  • col-*offset-* la centrul de coloane grid
  • a se vedea acest răspuns la centrul navbar

Demo Bootstrap 3 Orizontale de Centrare

Bootstrap 4

  • text-center este încă folosit pentru display:inline elemente
  • mx-auto înlocuiește centru-blocde la centrudisplay:block` elemente
  • offset-* sau `mx-auto poate fi utilizat de la centrul de coloane grid
  • justifica-conținut-centru în "rând" poate fi, de asemenea, folosit pentru centru col-*

mx-auto (auto x-axa marjele) va centerdisplay:block " sau " display:flexelemente care au o *definite lățime*, (%,vw,px`, etc..). Flexbox este utilizat în mod implicit de pe grila de coloane, astfel încât există, de asemenea, diverse flexbox de centrare metode.

Demo Bootstrap 4 Orizontală Centrarea

**Vertical Center** --

Acum, că Bootstrap 4 flexbox în mod implicit există multe abordări diferite pentru alinierea verticală folosind: auto-marjele, flexbox utils, sau la afișare utils, împreună cu align vertical utils. La prima "align vertical utils" pare evident, dar aceste doar de lucru cu inline și masă de elemente de afișare. Aici sunt unele Bootstrap 4 centrarea verticala opțiuni..

1 - Centru Vertical Folosind Auto Margini:

Un alt mod de a vertical centru este de a utiliza mi-auto. Acest lucru va center elementul în termen de l&#39;s container. De exemplu,h-100face pe rând înălțime completă, și mi-auto vor vertical centercol-sm-12` coloana.

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

Centru Vertical Folosind Auto Marjele Demo

mi-auto` reprezintă marjele pe verticală a axei y și este echivalentă cu:

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

2 - Centru Vertical cu Flexbox:

De Bootstrap 4 .rand este acum display:flex puteți folosi pur și simplu align-auto-centru pe orice coloană să vertical centru...

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

sau, utilizați align-articole-centru pe intreaga .rând să vertical centru alinia toate col-* in randul...

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

Verticală Centrul de Diferite Înălțime Coloane Demo

3 - Centru Vertical Cu Ajutorul Display-Utils:

Bootstrap 4 a afișare utils, care poate fi folosit pentru a afișa:masă,display:table-cell,display:inline`, etc.. Acestea pot fi utilizate cu alinierea verticală utils pentru a alinia inline, inline-block sau celulă de tabel elemente.

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

Centru Vertical cu Ajutorul Display-Utils Demo

Zim
Răspuns editat 4 iunie 2019 в 4:55
Comentarii (2)

Bootstrap 3.1.1 are o `.centru-bloc de clasa pentru centrarea divs. A se vedea: http://getbootstrap.com/css/#helper-classes-center.

Centrul de blocuri de conținut Stabilit un element de display: block si centru prin "marjă". Disponibil ca un mixin și de clasă.

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

Sau, ca altii au spus-o deja, de a folosi `.text-center clasa a centrului de text.

Comentarii (0)

Cel mai bun mod de a face acest lucru este de a defini un stil css:

.centered-text {
    text-align:center
}

Apoi, în cazul în care vreodată aveți nevoie centrat textul adauga astfel:

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

sau daca vrei doar tag-ul p centrat:

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

La mai puțin inline css folosi mai bine.

Comentarii (1)

Clasa .show-grilă se aplică centru de text aliniat în exemplul din link-ul.

Puteți adăuga întotdeauna `style="text-align:center" la rândul div sau o altă clasă m-aș gândi.

Comentarii (2)

În februarie 2013, în unele cazuri, am adăuga un "centrat" clasa "span" div:

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

și să CSS:

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

Motivul pentru aceasta este pentru că durata* div's a obține plutea la stânga, și "auto marja" centrarea tehnica functioneaza doar daca div este nu plutea.

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

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

Comentarii (3)

Dacă utilizați Bootstrap 3, ea are, de asemenea, built-in clasa CSS nume .text-center. Ca's ceea ce vrei.

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

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

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

Vă rugăm să consultați exemplu în jsfiddle. http://jsfiddle.net/ucheng/Q4Fue/

Comentarii (0)

Bootstrap 2.3 are un `text-center clasa. 

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

Pe partea mea am defini noi CSS stiluri gata de utilizare și ușor de ținut minte:

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

Este o idee bună? Nu există nici un bun antrenament pentru asta?

Comentarii (3)

Dacă sunteți folosind Bootstrap 2.0+

Acest lucru se poate face div centrat în pagină.

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

Orice text-align utilitate clasă ar face truc. Bootstrap a fost folosind `.text-center clasa pentru centrarea textului pentru o lungă perioadă de timp acum.

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

Sau vă puteți crea propria dvs. de utilități. Unele variații am'am văzut de-a lungul anilor:

.u-text-center { text-align: center !important; }
.ta-center { text-align: center !important; }
.ta\:c { text-align: center !important; }
Comentarii (1)

Aveți nevoie pentru a ajusta cu .span.

Exemplu:

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span4"></div>

    <div class="span4" align="center">
      <div class="hero-unit" align="center">
        <h3>Sign In</h3>

          <div class="input-prepend">
            <span class="add-on"> </span>
            <input class="span6" type="text" placeholder="Email address">
          </div>
          <div class="input-prepend">
            <span class="add-on"> </span>
            <input class="span6" type="password" placeholder="Password">
          </div>

      </div>
    </div>

    <div class="span4"></div>
  </div>

</div>
Comentarii (0)

Pentru versiunea Bootstrap 3.1.1 și mai sus, cea mai buna clasa pentru centrarea conținut este .centru-bloc helper class.

Peter Mortensen
Răspuns editat 28 octombrie 2017 в 10:26
Comentarii (1)

Metoda mea preferată de centrare blocuri de informații, menținând în același timp capacitatea de reacție (compatibilitate mobile) este de a plasa două goală span1 divs înainte și după conținutul pe care îl doresc de la centru.

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

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

</div>
Comentarii (0)

Puteți folosi oricare dintre tipurile de mai jos

  1. Utilizarea Bootstrap existente din clasa text-center.
  2. Adăugarea unui stil personalizat, style = "text-align:center".
  3. Utilizați o coloană offset:

Exemplu:

`

Peter Mortensen
Răspuns editat 28 octombrie 2017 в 10:38
Comentarii (0)

Centru-bloc este, de asemenea, o opțiune care nu sunt menționate în răspunsurile de mai sus

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

Toate clasa centru-bloc` nu este de a spune element să aibă o marjă de 0 auto, auto fiind marginile din stânga/dreapta. Cu toate acestea, cu excepția cazului în clasă text-center sau css text-align:center; este situat pe părinte, elementul nu știu de ideea de a lucra acest calcul automat, asa ca nu va center sine, cum s-a anticipat.

Deci, text-center este o opțiune mai bună.

Peter Mortensen
Răspuns editat 28 octombrie 2017 в 10:38
Comentarii (0)
 
<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>

Nu utilizați container-fluid în principal.

Peter Mortensen
Răspuns editat 28 octombrie 2017 в 10:27
Comentarii (2)

Actualizare 2018:

În Bootstrap 4.1.3, conținutul poate fi centrat, folosind clasa mx-auto`.

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

Referință: https://getbootstrap.com/docs/4.1/utilities/spacing/#horizontal-centering

Jens
Răspuns editat 25 noiembrie 2018 в 12:48
Comentarii (2)