Jak wyśrodkować div za pomocą Bootstrap2?

Question 1

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

edytować:

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

Question 2

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)

Question 3

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.

Question 4

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 .

Question 5

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>

Question 6

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 .

Question 7

dodaj zawartość centercontents

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

Question 8

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.

Question 9

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

Question 10

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>

Answer 1

84

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

edytować:

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

css twitter-bootstrap twitter-bootstrap-2 Alex
źródło

Czy chcesz wyśrodkować prostokąt na stronie w poziomie? Ponieważ containerklasa już to robi, pomyślałem, że możesz chcieć wyśrodkować mniejsze pudełko. A może chcesz wyśrodkować pole na stronie zarówno w poziomie, jak iw pionie?

Andres Ilich

14

mówisz w pudełku? . . . .w świecie programistów nazywamy to div

pythonian29033

Z jakiej wersji Bootstrap korzystałeś? powinno to znaleźć odzwierciedlenie w tytule, ponieważ ludzie, którzy to szukają, znajdą się tutaj i zobaczą przestarzały kod.

JGallardo

Answer 2

Czy chcesz wyśrodkować prostokąt na stronie w poziomie? Ponieważ containerklasa już to robi, pomyślałem, że możesz chcieć wyśrodkować mniejsze pudełko. A może chcesz wyśrodkować pole na stronie zarówno w poziomie, jak iw pionie?

Andres Ilich

Answer 3

14

mówisz w pudełku? . . . .w świecie programistów nazywamy to div

pythonian29033

Answer 4

Z jakiej wersji Bootstrap korzystałeś? powinno to znaleźć odzwierciedlenie w tytule, ponieważ ludzie, którzy to szukają, znajdą się tutaj i zobaczą przestarzały kod.

JGallardo

Answer 5

46

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)

csturtz
źródło

12

Rozważ odpowiedź Zuhaiba Ali. text-align: center nie działa przy wyśrodkowywaniu elementów w <div>. Klasa offset * nie jest tak naprawdę komponentami centrującymi. Po prostu stwarza iluzję centrowania. Możesz to sprawdzić, zmieniając rozmiar okna i sprawdzając, czy komponenty nie pozostają wyśrodkowane. Kiedy zastosujesz metodę Zuhaib Ali, komponenty pozostają wyśrodkowane.

BigSauce

Zamiast dodawać style w wierszu (style = "text-align: center"), dodaj klasę „center-block” i uzyskaj wyśrodkowaną zawartość w wyśrodkowanym elemencie div.

Shawn Taylor

col-md-4 lub col-lg-4 równa się marży: 0 auto; ?

jruzafa

Answer 6

12

Rozważ odpowiedź Zuhaiba Ali. text-align: center nie działa przy wyśrodkowywaniu elementów w <div>. Klasa offset * nie jest tak naprawdę komponentami centrującymi. Po prostu stwarza iluzję centrowania. Możesz to sprawdzić, zmieniając rozmiar okna i sprawdzając, czy komponenty nie pozostają wyśrodkowane. Kiedy zastosujesz metodę Zuhaib Ali, komponenty pozostają wyśrodkowane.

BigSauce

Answer 7

Zamiast dodawać style w wierszu (style = "text-align: center"), dodaj klasę „center-block” i uzyskaj wyśrodkowaną zawartość w wyśrodkowanym elemencie div.

Shawn Taylor

Answer 8

col-md-4 lub col-lg-4 równa się marży: 0 auto; ?

jruzafa

Answer 9

165

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.

Zuhaib Ali
źródło

5

TAK! Dziękuję, Zuhaib! Działał doskonale. Ta odpowiedź powinna zostać uznana za poprawną odpowiedź na to pytanie.

BigSauce

@ZuhaibAli Dodawanie float: none;naprawić mój problem.

SIFE,

1

Używam Railsów, więc chcę tylko zaznaczyć, że w *= require bootstrap.min *= require_self*= require_tree

2

To nie zadziałało dla mnie, ale dodanie display: tablewydawało się to naprawić

Peter Berg

1

Świetna odpowiedź! Pracuję z tym od teraz.

serv-bot 22

Answer 10

5

TAK! Dziękuję, Zuhaib! Działał doskonale. Ta odpowiedź powinna zostać uznana za poprawną odpowiedź na to pytanie.

BigSauce

Answer 11

@ZuhaibAli Dodawanie float: none;naprawić mój problem.

SIFE,

Answer 12

1

Używam Railsów, więc chcę tylko zaznaczyć, że w *= require bootstrap.min *= require_self*= require_tree

Answer 13

2

To nie zadziałało dla mnie, ale dodanie display: tablewydawało się to naprawić

Peter Berg

Answer 14

1

Świetna odpowiedź! Pracuję z tym od teraz.

serv-bot 22

Answer 15

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 .

Answer 16

20

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>

Craig
źródło

czy to właściwy sposób na wyśrodkowanie elementów div w boostrap?

Gavindra Kalikapersaud

1

Treść elementu div nie jest wyśrodkowana, ale sam element div.

Craig

Answer 17

czy to właściwy sposób na wyśrodkowanie elementów div w boostrap?

Gavindra Kalikapersaud

Answer 18

1

Treść elementu div nie jest wyśrodkowana, ale sam element div.

Craig

Answer 19

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 .

Answer 20

3

dodaj zawartość centercontents

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

mrpix
źródło

Answer 21

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.

Answer 22

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

Answer 23

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>

Jak wyśrodkować div za pomocą Bootstrap2?

Odpowiedzi: