Twitter Bootstrap - jak wyśrodkować elementy w poziomie lub w pionie


285

czy jest jakiś sposób na wyśrodkowanie elementów HTML pionowo lub poziomo w głównych rodzicach?


2
To świetny post na temat centrowania w poziomie i w pionie: patrz tutaj
markvandencorput,

2
Ja także miałem problem z wyrównaniem w poziomie; Po prostu użyłem <center></center>tagu
Utpal - Ur Best Pal

4
@ Utpal-UrBestPal <center>tag został wycofany około 12 lat temu.
Niels Keurentjes,

Odpowiedzi:


246

Aktualizacja : chociaż ta odpowiedź była prawdopodobnie poprawna na początku 2013 r., Nie należy jej już używać. Właściwe rozwiązanie wykorzystuje przesunięcia .


Jeśli chodzi o sugestie innych użytkowników, dostępne są również natywne klasy bootstrap, takie jak:

class="text-center"
class="pagination-centered"

dzięki @Henning i @trejder


22
Dokładny styl jest już zawarty w Bootstrap; po prostu użyjclass="text-center"
Henning

3
Lub .pagination-centeredjako alternatywa.
trejder

7
To powinna być odpowiedź, pozostałe zignorują całą część pytania „w bootstrapie”.
Ryan McDonough

1
@RyanMcDonough tak, skutecznie to jest rozgoryczenie wszystkich innych osób zasugerowanych, więc sprawdziłem jako odpowiedź ok?
itsme

1
Korzystanie text-centerz układu jest bardzo złą praktyką. Właściwym sposobem wyrównywania kolumn w Bootstrap jest użycie col-XX-offset-Yklas. getbootstrap.com/css/#grid-offsetting . Ta odpowiedź prawdopodobnie miała rację w 2013 r., Ale nie należy jej już dzisiaj używać.
Niels Keurentjes,


55

Dla przyszłych użytkowników tego pytania:

Jeśli próbujesz wyśrodkować obraz w div, ale obraz nie zostanie wyśrodkowany, może to opisać twój problem:

jsFiddle DEMO problemu

<div class="col-sm-4 text-center">
    <img class="img-responsive text-center" src="myPic.jpg" />
</div>

img-responsiveKlasa dodaje display:blockinstrukcji do znacznika obrazu, który zatrzymuje text-align:center( text-centerklasa) z pracy.

ROZWIĄZANIE:

<div class="col-sm-4">
    <img class="img-responsive center-block" src="myPic.jpg" />
</div>

jsFiddle of the solution

Dodanie center-blockklasy zastępuje display:blockinstrukcję wprowadzoną za pomocą img-responsiveklasy.

Bez img-responsiveklasy obraz wyśrodkowałby się po prostu poprzez dodanie text-centerklasy


Aktualizacja:

Ponadto powinieneś znać podstawy Flexbox i jak go używać, ponieważ Bootstrap4 używa go teraz natywnie .

Oto doskonały, szybki przewodnik wideo autorstwa Brada Schiffa

Oto świetna ściągawka


32

Zaktualizowano 2018

W Bootstrap 4 , gdy centrujące metody zmieniły ..

Centrum poziome w BS4

  • text-centerjest nadal używany do display:inlineelementów
  • mx-autozastępuje center-blockw centrum display:flexdzieci
  • offset-* lub mx-auto może służyć do wyśrodkowania kolumn siatki

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

Centrowanie pionowe w BS4 znajduje się na stronie https://stackoverflow.com/a/41464397/171456


30

Możesz bezpośrednio zapisać do swojego pliku css w następujący sposób:

.content {
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
  }
<div class = "content" >
  
   <p> some text </p>
  </div>


9

używam tego

<style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0 0;
    }

    .container-fluid {
        height: 100%;
        display: table;
        width: 100%;
        padding-right: 0;
        padding-left: 0;
    }

    .row-fluid {
        height: 100%;
        display: table-cell;
        vertical-align: middle;
        width: 100%;
    }

    .centering {
        float: none;
        margin: 0 auto;
    }
</style>
<body>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="offset3 span6 centering">
                content here
            </div>
        </div>
    </div>
</body>

1
Nie działa w niektórych przypadkach (patrz komentarz na zasadniczo tej samej odpowiedzi i nie skorzystać z Bootstrap specyficznych klas do centrowania .
Dan Dăscălescu

7

do poziomego centrowania możesz mieć coś takiego:

.centering{
float:none;
margin:0 auto
}

 <div class="span8 centering"></div>

4
Nie działa (przynajmniej nie w obecnej implementacji), gdy stosowane bezpośrednio na obrazie: <img src="img/logo.png" style="float:none; margin:0 auto" />. Otaczanie imgrodzica divi dawanie .text-centerlub .pagination-centeredlekcja dla rodzica działa jak urok.
trejder

2
aby wyśrodkować element z marginesem: 0 auto, musisz dodać szerokość do tego elementu. W powyższym przykładzie nie określono szerokości, ponieważ span8 ma szerokość w pasku boobstrap, ale twój obraz nie jest taki <img src = "img / logo.png" style = "float: none; margin: 0 auto; width: 300px" /> wyśrodkuje poziomo ten obraz wewnątrz rodzica
Raul,

2
To ignoruje część pytania „Bootstrap”.
Dan Dascalescu


5

Z bootstrap 4 możesz używać flex

<div class="d-flex justify-content-center align-items-center">
    <button type="submit" class="btn btn-primary">Create</button>
</div>

źródło: bootstrap 4.1


3

bootstrap 4 + Flex rozwiązuje ten problem

możesz użyć

<div class="d-flex justify-content-center align-items-center">
    <button type="submit" class="btn btn-primary">Create</button>
</div>

powinien wyśrodkować środek w poziomie i w pionie


0

Odkryłem w Bootstrap 4, że możesz to zrobić:

środkowy poziomy jest rzeczywiście text-centerklasą

środkowy w pionie, jednak dodanie klas ładowania początkowego powoduje dodanie obu mb-auto mt-autotak, aby margines górny i margines dolny były ustawione na auto.


0

dla bootstrap4 pionowy środek kilku przedmiotów

d-flex dla reguł flex

kolumna elastyczna dla kierunku pionowego na przedmiotach

justify-content-center do centrowania

style = 'height: 300px;' musi mieć wartości zadane, dla których środek ma być obliczony lub użyć klasy h-100

<div class="d-flex flex-column justify-content-center bg-secondary" style="
    height: 300px;
">
    <div class="p-2 bg-primary">Flex item</div>
    <div class="p-2 bg-primary">Flex item</div>
    <div class="p-2 bg-primary">Flex item</div>
  </div> 
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.