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?

css twitter-bootstrap

— to ja
źródło

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,

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

— to ja
źródło

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,

76

Z dokumentacji Bootstrap :

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

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

— m0000g
źródło

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

— cssyphus
źródło

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

— Zim
źródło

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>

Rozwiń fragment kodu

— kirgiz_jigit
źródło

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>

— atabak
źródło

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>

— PersianMan
źródło

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

Podoba mi się to rozwiązanie z podobnego pytania. https://stackoverflow.com/a/25036303/2364401 Użyj text-centerklasy bootstraps na rzeczywistych danych <td>tabeli i <th>elementach nagłówka tabeli . Więc

<td class="text-center">Cell data</td>

i

<th class="text-center">Header cell data</th>

— Xander-Miller
źródło

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

— alvseek
źródło

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>

Rozwiń fragment kodu

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

— taoufiqaitali
źródło

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.

— online Thomas
źródło

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>

— Ramil Gilfanov
źródło