Bootstrap di Twitter: come centrare gli elementi in orizzontale o in verticale

286

c'è un modo per centrare gli elementi html verticalmente o orizzontalmente all'interno dei genitori principali?

css twitter-bootstrap

— sono io
fonte

2

Questo è un ottimo post sul centraggio orizzontale e verticale: vedi qui

— markvandencorput

2

Anch'io stavo affrontando un problema per l'allineamento orizzontale; Ho semplicemente usato il <center></center>tag

— Utpal - Ur Best Pal

4

@ Utpal-UrBestPal il <center>tag è stato deprecato circa 12 anni fa.

— Niels Keurentjes,

247

Aggiornamento : sebbene questa risposta sia stata probabilmente corretta all'inizio del 2013, non dovrebbe più essere utilizzata. La soluzione corretta utilizza gli offset .

Come per altri suggerimenti degli utenti ci sono anche classi native bootstrap disponibili come:

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

grazie a @Henning e @trejder

— sono io
fonte

22

Lo stesso identico stile è già contenuto in Bootstrap; basta usareclass="text-center"

— Henning

3

O .pagination-centeredin alternativa.

— trejder,

7

Questa dovrebbe essere la risposta, gli altri ignorano l'intera parte "in bootstrap" della domanda.

— Ryan McDonough,

1

@RyanMcDonough, sì, in effetti, questo sta riassumendo tutte le altre persone suggerite, quindi ho controllato come risposta ok?

— È il

1

L'uso text-centerper il layout è una pessima pratica. Il modo corretto di allineare le colonne in Bootstrap è utilizzare le col-XX-offset-Yclassi. getbootstrap.com/css/#grid-offsetting . Probabilmente questa risposta era corretta nel 2013, ma non dovrebbe più essere utilizzata oggi.

— Niels Keurentjes,

76

Dalla documentazione Bootstrap :

Impostare un elemento su display: blocke centrare via margin. Disponibile come mixin e classe.

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

— m0000g
fonte

55

Per i futuri visitatori di questa domanda:

Se stai cercando di centrare un'immagine in un div ma l'immagine non è centrata, questo potrebbe descrivere il tuo problema:

jsFiddle DEMO del problema

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

La img-responsiveclasse aggiunge display:blockun'istruzione al tag immagine, che impedisce text-align:center( text-centerclasse) di funzionare.

SOLUZIONE:

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

jsFiddle of the solution

L'aggiunta della center-blockclasse sostituisce l' display:blockistruzione inserita utilizzando la img-responsiveclasse.

Senza la img-responsiveclasse, l'immagine sarebbe centrata solo aggiungendo text-centerclasse

Aggiornare:

Inoltre, dovresti conoscere le basi di flexbox e come usarlo, poiché Bootstrap4 ora lo utilizza in modo nativo .

Ecco un eccellente video tutorial veloce di Brad Schiff

Ecco un ottimo cheat sheet

— cssyphus
fonte

32

Aggiornato 2018

In Bootstrap 4 , i metodi di centraggio sono cambiati ..

Centro orizzontale in BS4

text-centerè ancora usato per gli display:inlineelementi
mx-autosostituisce center-blockal centro i display:flexbambini
offset-* o mx-auto può essere utilizzato per centrare le colonne della griglia

mx-auto(margini auto asse x) si concentreranno display:blocko display:flexelementi che hanno una larghezza definita , ( %, vw, px, ecc ..). Flexbox viene utilizzato per impostazione predefinita nelle colonne della griglia, quindi esistono anche vari metodi di centraggio del flexbox.

Demo Bootstrap 4 Centratura orizzontale

Per il centraggio verticale in BS4 consultare https://stackoverflow.com/a/41464397/171456

— Zim
fonte

30

Puoi scrivere direttamente nel tuo file css in questo modo:

.content {
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
  }

<div class = "content" >
  
   <p> some text </p>
  </div>

Espandi frammento

— kirgiz_jigit
fonte

9

lo uso

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

1

In alcuni casi non funziona (vedi il commento essenzialmente sulla stessa risposta e non utilizza le classi specifiche di Bootstrap per il centraggio .

— Dan Dascalescu,

7

per il centraggio orizzontale puoi avere qualcosa del genere:

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

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

— PersianMan
fonte

4

Non funziona (almeno non in esecuzione corrente), quando viene utilizzato direttamente in un'immagine: <img src="img/logo.png" style="float:none; margin:0 auto" />. Circondare imgcon i genitori dive dare .text-centero .pagination-centeredclasse ai genitori funziona come un incantesimo.

— trejder,

2

per centrare un elemento con margine: 0 auto, devi aggiungere una larghezza a quell'elemento. Nell'esempio sopra non è stata specificata alcuna larghezza perché span8 ha una larghezza nel boobstrap ma l'immagine non è così <img src = "img / logo.png" style = "float: none; margin: 0 auto; larghezza: 300px" /> centrerà orizzontalmente quell'immagine all'interno del genitore

— Raul,

2

Ciò ignora la parte "Bootstrap" della domanda.

— Dan Dascalescu

5

Mi piace questa soluzione da una domanda simile. https://stackoverflow.com/a/25036303/2364401 Utilizzare la text-centerclasse bootstraps sui dati effettivi della tabella <td>e sugli <th>elementi dell'intestazione della tabella . Così

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

e

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

— Xander-Miller
fonte

5

Con bootstrap 4 puoi usare flex

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

fonte: bootstrap 4.1

— alvseek
fonte

3

bootstrap 4 + Flex risolve questo problema

Puoi usare

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

Espandi frammento

dovrebbe centrare il centesimo in orizzontale e in verticale

— taoufiqaitali
fonte

0

Ho scoperto in Bootstrap 4 che puoi fare questo:

il centro orizzontale è davvero di text-centerclasse

il centro verticale tuttavia l'utilizzo delle classi bootstrap sta aggiungendo entrambe, in mb-auto mt-automodo tale che margin-top e margin bottom siano impostati su auto.

— in linea Thomas
fonte

0

per bootstrap4 centro verticale di alcuni elementi

d-flex per regole flex

colonna flessibile per la direzione verticale degli oggetti

justify-content-center per il centraggio

style = 'height: 300px;' deve avere per i set point in cui il centro deve essere calcolato o utilizzare la classe 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
fonte