Jak wyśrodkować div za pomocą Bootstrap2?

http://twitter.github.com/bootstrap/scaffolding.html

Próbowałem wszystkich kombinacji:

<div class="row">
  <div class="span7 offset5"> box </div>
</div>

lub

<div class="container">
  <div class="row">
    <div class="span7 offset5"> box </div>
  </div>  
</div>

zmienione numery rozpiętości i przesunięcia ...

Ale nie mogę uzyskać prostego pudełka idealnie wyśrodkowanego na stronie :(

Chcę tylko sześciokolumnowe pudełko wyśrodkowane ...

zrobił to z

<div class="container">
  <div class="row" id="login-container">
    <div class="span8 offset2">
       box
    </div>
  </div>
</div>

Ale pudełko jest zbyt szerokie, czy jest jakiś sposób, aby to zrobić z span7?

span7 offset2zapewnia dodatkowe wypełnienie po lewej stronie span7 offset3dodatkowe wypełnienie po prawej stronie ...

oprócz samego div kurczy się do wielkości chcesz, poprzez zmniejszenie rozmiaru rozpiętości jak tak ... class="span6 offset3", class="span4 offset4"itd ... Coś tak prostego jak style="text-align: center"na div może mieć efekt, którego szukasz

nie możesz użyć span7 z dowolnym ustawionym przesunięciem i uzyskać rozpiętość wyśrodkowaną na stronie (ponieważ total span = 12)

Rozpiętości Bootstrap są przesunięte w lewo. Aby je wyśrodkować, wystarczy pominąć to zachowanie. Robię to, dodając to do mojego arkusza stylów:

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

Jeśli masz zdefiniowaną klasę, po prostu dodaj ją do zakresu i gotowe.

<div class="span7 center"> box </div>

Zauważ, że ta niestandardowa klasa centralna musi być zdefiniowana po bootstrap css. Możesz użyć, !importantale to nie jest zalecane.

Bootstrap3 ma .center-blockklasę, której możesz użyć. Jest zdefiniowany jako

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

Dokumentacja tutaj .

Jeśli chcesz przejść na pełny bootstrap (a nie automatycznie w lewo / w prawo), potrzebujesz wzoru, który zmieści się w 12 kolumnach, np. 2 puste miejsca, 8 treści, 2 puste miejsca. To właśnie zrobi ta konfiguracja. Obejmuje tylko warianty -md- , mam tendencję do przyciągania go do pełnego rozmiaru dla małych, dodając col-xs-12

<div class="container">
  <div class="col-md-8 col-md-offset-2">
     box
  </div>
</div>

Wygląda na to, że chciałeś po prostu wyśrodkować i wyrównać pojedynczy kontener. Struktura bootstrap może zbytnio komplikować ten jeden przykład, mógłbyś po prostu mieć samodzielny element div z własną stylizacją, na przykład:

<div class="login-container">
  <!-- Your Login Form -->
</div>

i styl:

.login-container {
  margin: 0 auto;
  width: 400px; /* Whatever exact width you are looking for (not bound by preset bootstrap widths) */
}

To powinno działać dobrze, jeśli jesteś zagnieżdżony gdzieś w module .containerdiv bootstrap .

dodaj zawartość centercontents

/** Center the contents of the element **/
.centercontents {
    text-align: center !important;
}

Kod @ZuhaibAli działa jak dla mnie, ale trochę go zmieniłem:

Utworzyłem nową klasę w css

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

wtedy staje się div

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

Dodałem col-md-6 dla szerokości samego div, co w tej sytuacji oznaczało, że div jest o połowę mniejszy, w bootstrapie jest 1 -12 col md.

Postępuj zgodnie z tymi wskazówkami https://getbootstrap.com/docs/3.3/css/

Posługiwać się .center-block

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

zawiń element div w nadrzędny element div z klasą, rowa następnie dodaj styl margin:0 auto;do elementu div

<div class="row">
  <div style="margin: 0 auto;">center</div>
</div>